理解Retina设备的CSS媒体查询

Question

我正在开发一个WordPress主题，尝试将视网膜屏幕支持的CSS查询整合到我的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; 
          }
     }

});

谢谢你

- Jason

Answer 1

只要存在某种形式的缩放，比如在声明 <meta name="viewport" content="width=..."> (适用于android/ios/blackberry/WP8) 或者 @ms-viewport {width: ... ;} (适用于非WP8 IE10)，或者即使你什么都没有声明，在大多数移动设备中默认情况下会自动缩放以适应viewport宽度 = 980px。这意味着你不需要改变样式类别中除了背景图片URL之外的任何CSS维度，当媒体查询适配高分辨率设备时，只需更改背景图像的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]);
     }
}

- Amann Malik

---

非常感谢您提供如此清晰的答案。现在我对此有了更深刻的理解。 - Jason