Понимание CSS-запросов устройства Retina

Question

Я работаю над темой WordPress и пытаюсь включить CSS-запросы с поддержкой Retina в мой CSS-файл.

Я просто хотел бы уточнить, что у меня правильно настроены медиазапросы, прежде чем я заменю все свои фоновые изображения.

1. Я удвоил размер всех своих фоновых изображений и добавил их к соглашению об именах "@2x". например [e-mail],
2. Я добавил функцию jQuery в свой код, чтобы поменять изображения с помощью класса CSS hires,
3. В моем документе CSS у меня есть нормальный класс CSS для фонового изображения.

Нормальный CSS-запрос

.side-nav .arrow {
  background: url(../images/arrow-nav.png) no-repeat top left;
  width: 5px;
  height: 8px;
  display: inline-block;
  margin-left: 10px
}

Это правильный способ, которым я бы изменил класс.side-nav.arrow для устройства с включенной сетчаткой? При объявлении размера фона я сохраняю размер исходного изображения меньшего размера?

/* All Retina Ready devices larger than 1.5 pixel ratio */
@media only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {

    .side-nav .arrow { 
        background-image:url(../images/[e-mail]); 
        -webkit-background-size:5px 8px;
        -moz-background-size:5px 8px;
        -o-background-size:5px 8px;
        background-size:5px 8px 
    }
}

Код JQuery

$(function () {

    if (window.devicePixelRatio == 2) {

          var images = $("img.hires");

          /* loop through the images and make them hi-res */
          for(var i = 0; i < images.length; i++) {

            /* create new image name */
            var imageType = images[i].src.substr(-4);
            var imageName = images[i].src.substr(0, images[i].src.length - 4);
            imageName += "@2x" + imageType;

            /* rename image */
            images[i].src = imageName; 
          }
     }

});

Спасибо

Answer 1

Пока существует некоторая форма масштабирования, например, когда вы объявляете

<meta name="viewport" content="width=..."> (для Android/ IOS / BlackBerry/WP8)

или же

@ms-viewport {width: ... ;} (для не WP8 IE10)

или... даже если вы ничего не объявите, большинство мобильных устройств по умолчанию автоматически масштабируются так, что ширина области просмотра =980 пикселей

тогда все измерения CSS, которые вы объявляете с помощью "px", будут существовать в той же пропорции, что и их область просмотра, независимо от различий между их физическим DPI/PPI

это означает, что вам не нужно менять что-то в своем классе стилей, кроме URL-адреса фонового изображения, когда медиа-запрос соответствует устройству с высоким разрешением:

@media only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5),
only screen and (min-resolution: 144dpi) {
    .side-nav .arrow { 
         background-image:url(../images/[e-mail]);
     }
}