CSS “@media screen and (-webkit-min-device-pixel-ratio:0)”的语义是什么？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4104004/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What's the semantic of "@media screen and (-webkit-min-device-pixel-ratio:0)"?
提问by Morgan Cheng
I happened to use the below CSS hack for WebKit-based browsers, according to http://www.webmonkey.com/2010/02/browser-specific_css_hacks/.
根据http://www.webmonkey.com/2010/02/browser-specific_css_hacks/，我碰巧对基于 WebKit 的浏览器使用了以下 CSS hack 。
@media screen and (-webkit-min-device-pixel-ratio:0) {
#my-id { height: 100%; }
}
It works. But, later I found that it doesn't work in production environment. I found out that it is due to CSS optimizer trimming the space after and. The below CSS is not recognizable by Chrome.
有用。但是，后来我发现它在生产环境中不起作用。我发现这是由于 CSS 优化器在and. Chrome 无法识别以下 CSS。
@media screen and(-webkit-min-device-pixel-ratio:0) {
#my-id { height: 100%; }
}
So, what does exactly the @media screen and (-webkit-min-device-pixel-ratio:0)mean?
那么，究竟是什么@media screen and (-webkit-min-device-pixel-ratio:0)意思呢？
I know @media screen, but I haven't used andin a CSS file before.
我知道@media screen，但我以前没有and在 CSS 文件中使用过。
Why is the space character after andnecessary?
为什么后面的空格字符是and必要的？
回答by BoltClock
The media query itself is, like you say, used to filter WebKit because it uses a -webkit-property.
正如您所说，媒体查询本身用于过滤 WebKit，因为它使用了一个-webkit-属性。
Chrome is simply a little strict when you say it can't recognize
当你说它无法识别时，Chrome 只是有点严格
@media screen and(-webkit-min-device-pixel-ratio:0)
because that is in fact invalid CSS. The space after the andkeyword is significant. This is clearly stated in the CSS3 media query spec:
因为那实际上是无效的 CSS。and关键字后的空格很重要。这在CSS3 媒体查询规范中有明确说明：
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.)
@media all and(color) { … }
例 20
以下是格式错误的媒体查询，因为在“and”和表达式之间不允许有空格。（这是为功能符号语法保留的。）
@media all and(color) { … }
The functional notation refers to things like url(), rgb()and rgba(). As you can see there is no space between the function name and the opening parenthesis in these examples.
功能符号指的是诸如url(),rgb()和 之类的东西rgba()。如您所见，在这些示例中，函数名称和左括号之间没有空格。
andis not a function, but simply a keyword to say that the media query must match the medium you specify, andthat the layout engine must satisfy the expression you place after it. The parentheses around -webkit-min-device-pixel-ratio:0simply denote it as an expression.
and不是函数，而只是一个关键字，表示媒体查询必须与您指定的媒体匹配，并且布局引擎必须满足您放置在其后的表达式。周围的括号-webkit-min-device-pixel-ratio:0只是将其表示为表达式。
Addendum:yes, that does mean your CSS optimizer has a bug ;)
附录：是的，这确实意味着您的 CSS 优化器存在错误；)
回答by szaboat
Here is a quick workaround with YUI compressor's special comment.
这是 YUI 压缩器的特殊注释的快速解决方法。
@media screen and/*!*/(-webkit-min-device-pixel-ratio:0) { ... }
The issue is fixed in the current (2.4.5) version
该问题已在当前 (2.4.5) 版本中修复
回答by Fareed Alnamrouti
Only use this:
只使用这个：
@media(-webkit-min-device-pixel-ratio:0) {
}
