Связанные с разрешением кнопки / элементы - как?

Question

Мне нужно поместить некоторые графические элементы в div, который должен отображаться на разных экранах с разным разрешением (например, на мобильных экранах). Например, что-то похожее на кнопку «X», которая закрывает окно наложения. Я мог бы подумать о нескольких вариантах его реализации:

1. Имейте несколько JPEG (один для каждого разрешения) и выберите их в JavaScript
2. Визуализация графики (это просто) с использованием функций HTML5
3. Возможно, есть поддержка CSS?
4. Что-нибудь еще?

Было бы здорово получить какой-либо совет / известную практику, поэтому я не буду изобретать велосипед.

Answer 1

css rule:

img {
  width: 100%;
}

нет?И используйте правило @media:

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