Question

I need to place some graphic elements in a div that is supposed to be seen on various screens with different resolutions (for example, mobile screens). Just for example, something similar to the “X” button that closes an overlay window. I might think of several options to implement it:

1. Have several JPEGs (one for each resolution) and select them in JavaScript
2. Render the graphics (it is simple) using HTML5 features
3. Any CSS support probably?
4. Anything else?

It would be great to have any kind of advice/well-known practice, so I won’t reinvent the wheel.

Answer 1

css rule:

img {
  width: 100%;
}

no?
And use @media rule:

@media only screen and (min-width: 768px) and (max-width: 991px) {
    div {
      width: 100px;
    }
}