了解 Retina 设备 CSS 媒体查询

Posted 2023-03-06

【中文标题】了解 Retina 设备 CSS 媒体查询

【英文标题】：Understanding Retina device CSS Media queries

【发布时间】：2013-03-05 14:03:51

【问题描述】：

我正在开发一个 WordPress 主题并尝试将启用视网膜的 CSS 查询合并到我的 CSS 文件中。

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

我已将所有背景图像的大小翻倍并添加了前缀 它们使用“@2x”命名约定。例如[e-mail]。 我在我的代码中添加了一个 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/[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; 
          
     

);

谢谢

【参考方案1】：

只要有某种形式的缩放发生，比如你声明的时候

<meta name="viewport" content="width=...">（适用于 android/ios/blackberry/WP8）

或

@ms-viewport width: ... ;（适用于非 WP8 IE10）

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

那么，无论物理 DPI/PPI 之间的差异如何，您使用 'px' 声明的所有 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]);
     

【讨论】：

非常感谢您给出如此明确的答复。现在更有意义了。