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

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 和 android 都使用 webkit 引擎，因此第二个代码块针对整个 Apple 产品线以及任何使用 chrome 或使用 Blink 引擎（fork）的新版 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 就足够了。