您的位置: 首页  >  技术问答  >  什么是“@media screen和（-webkit-min-device-pixel-ratio：0）”的语义

什么是“@media screen和（-webkit-min-device-pixel-ratio：0）”的语义

分类: 技术问答 • 2022-05-24 11:36:25
问题描述：

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

@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%; }
}

和（-webkit-min-device-pixel-ratio：0）是什么意思？

So, what does exactly the @media screen 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。关键字和后的空格很重要。这在 CSS3媒体查询规范中有明确说明：

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:


示例20



以下是格式不正确的媒体查询，因为在'和'之间没有空格， 。 （保留给函数式语法。）

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) { … }


函数符号指的是 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 ;)

相关推荐