2

牢记渐进增强、浏览器/设备支持、“移动优先”和多种 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

4

1 回答 1

0

由于 safari 和 android 都使用 webkit 引擎，因此第二个代码块针对整个 Apple 产品线以及任何带有 chrome 的桌面或移动设备或使用 Blink 引擎（Webkit 的一个分支）的 Opera 的较新版本. 第一个代码块针对所有 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足够了。

于 2012-09-04T15:15:57.310 回答