Question

牢记渐进式增强，浏览器/设备支持，“移动优先”以及多种iOS“视网膜”显示比例...... 这个目标是否正确并仍然提供传统支持？

@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) { @import '2x'; }

我已经看到它看起来几乎太容易了：

@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and ( min-resolution: 192dpi) { @import '2x'; }

最小分辨率参考：http://www.w3.org/TR/css3-values/#resolution

Answer 1

由于safari使用了webkit引擎，android也是如此，第二段代码针对的是整个Apple产品阵容以及任何带有chrome的桌面或移动设备或使用Blink引擎的新版Opera（一个分叉） Webkit）。第一个代码块面向所有Web浏览器以及前面提到的。

对于括号内的代码的提示，您可以将2x.css文件中的代码直接放入这些括号中。浏览器不仅会更快地解析和渲染css，因为它恰好在媒体查询之后，但它也会阻止使用@import语句，这会使浏览器的速度变慢。

@media only screen and (-webkit-min-device-pixel-ratio: 2) and ( min-resolution: 192dpi) {
    body {
        background: brown;
    }

    #wrapper {
        background: green;
    } 
}

这是您在使用媒体查询时要执行的操作，并避免在每个规范之间使用only screen和逗号; and就足够了。

更新了高分辨率设备的媒体查询

1 个答案: