Question

我正在研究WordPress主题，并尝试将支持视网膜的CSS查询合并到我的CSS文件中。

我想澄清一下，在更改所有背景图片之前，我已正确设置了媒体查询。

我将所有背景图片的大小增加了一倍并打了个针脚它们具有“@ 2x”命名约定。例如icon-user@2x.png。
我在我的代码中添加了一个jQuery函数，用hires的CSS类交换图像。
在我的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/arrow-nav@2x.png); 
        -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）

或...即使您没有声明任何内容，大多数移动设备默认会自动缩放，以便视口宽度= 980px

然后，您使用'px'声明的所有CSS维度将与其视口的比例相同，而不管它们的物理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/arrow-nav@2x.png);
     }
}

了解Retina设备CSS媒体查询

1 个答案: