问题描述
根据。
@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)”的语义的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!