css – “@media screen and(-webkit-min-device-pixel-ratio：0)”的语义是什么？

根据 http://www.webmonkey.com/2010/02/browser-specific_css_hacks/，我碰巧使用以下CSS黑客为基于WebKit的浏览器。

@media screen and (-webkit-min-device-pixel-ratio:0) {
    #my-id { height: 100%; }
}

有用。但是后来我发现它在生产环境中不起作用。我发现这是由于CSS优化器修剪后的空间。以下CSS不能被Chrome识别。

@media screen and(-webkit-min-device-pixel-ratio:0) {
    #my-id { height: 100%; }
}

那么，@media屏幕和(-webkit-min-device-pixel-ratio：0)是什么意思？

我知道@media屏幕，但我以前没有使用过CSS文件。

为什么空间字符后面是必需的？

解决方法

媒体查询本身就像您所说，用于过滤WebKit，因为它使用-webkit-属性。

当你说它不能识别时，Chrome只是有点严格

@media screen and(-webkit-min-device-pixel-ratio:0)

因为这实际上是无效的CSS。关键字后面的空格是显着的。这在CSS3 media query spec年是明确的：

EXAMPLE 20

The following is an malformed media query because having no space between ‘and’ and the expression is not allowed. (That is reserved for the functional notation syntax.)

06001

功能符号指的是像url()，rgb()和rgba()这样的东西。您可以看到这些示例中的函数名和开始的括号之间没有空格。

并不是一个功能，而只是一个关键字，说媒体查询必须与您指定的媒体匹配，并且布局引擎必须满足您之后放置的表达式。围绕-webkit-min-device-pixel-ratio：0的括号简单地表示为表达式。

附录：是的，这意味着你的CSS优化器有一个错误;)