问题描述
根据。
@media screen and (-webkit-min-device-pixel-ratio:0) {
#my-id { height: 100%; }
}
但是，后来我发现它在生产环境中不工作。我发现，这是由于CSS优化程序修剪和后的空间。以下CSS无法通过Chrome识别。
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.
@media screen and(-webkit-min-device-pixel-ratio:0) {
#my-id { height: 100%; }
}
那么， @media and（-webkit-min-device-pixel-ratio：0） mean？
我知道 @media ，但我之前没有在CSS文件中使用和。
I know @media screen, but I haven't used and in a CSS file before.
是和必要的空格字符？
推荐答案
媒体查询就像你说的，用来过滤WebKit，因为它使用 -webkit - 属性。
The media query itself is, like you say, used to filter WebKit because it uses a -webkit- property.
当你说它不能识别时，有一点严格。
Chrome is simply a little strict when you say it can't recognize
@media screen and(-webkit-min-device-pixel-ratio:0)
因为这实际上是无效的CSS。关键字和后面的空格很重要。这在中有清楚的说明：
because that is in fact invalid CSS. The space after the and keyword is significant. This is clearly stated in the CSS3 media query spec:
@media all and(color) { … }
函数符号指的是 url code>， rgb（）和 rgba（）。您可以看到这些示例中的函数名和开头括号之间没有空格。
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.
和不是一个函数，而只是一个关键字，说媒体查询必须匹配您指定的媒体和，布局引擎必须满足您放置在其后的表达式。 -webkit-min-device-pixel-ratio：0 周围的括号简单表示为表达式。
and is not a function, but simply a keyword to say that the media query must match the medium you specify, and that the layout engine must satisfy the expression you place after it. The parentheses around -webkit-min-device-pixel-ratio:0 simply denote it as an expression.
附录：是的，这意味着您的CSS优化程序有一个错误;）
Addendum: yes, that does mean your CSS optimizer has a bug ;)
这篇关于什么是“@media screen和（-webkit-min-device-pixel-ratio：0）”的语义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！