“@media screen and (-webkit-min-device-pixel-ratio:0)”的语义是啥?

Posted

技术标签:

【中文标题】“@media screen and (-webkit-min-device-pixel-ratio:0)”的语义是啥?【英文标题】:What's the semantic of "@media screen and (-webkit-min-device-pixel-ratio:0)"?“@media screen and (-webkit-min-device-pixel-ratio:0)”的语义是什么? 【发布时间】:2011-05-05 11:27:08 【问题描述】:

根据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%; 

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

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

那么,@media screen and (-webkit-min-device-pixel-ratio:0) 到底是什么意思?

我知道@media screen,但我之前没有在 CSS 文件中使用过and

为什么and 后面的空格字符是必须的?

【问题讨论】:

从技术上讲,我不认为这是一个 CSS hack。这并不是这些语言功能的用途,但由于使用了-webkit-min-device-pixel-ratio:0,它非常有效地识别了 WebKit。不那么老套的黑客之一。 另见***.com/questions/4144706/… 【参考方案1】:

正如您所说,媒体查询本身用于过滤 WebKit,因为它使用 -webkit- 属性。

当你说它无法识别时,Chrome 只是有点严格

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

因为那实际上是无效的 CSS。 and 关键字后面的空格很重要。这在CSS3 media query spec中有明确说明:

示例 20

以下是格式错误的媒体查询,因为“and”和表达式之间没有空格是不允许的。 (这是为功能符号语法保留的。)

@media all and(color)  … 

函数符号指的是url()rgb()rgba()。如您所见,在这些示例中,函数名称和左括号之间没有空格。

and 不是一个函数,而只是一个关键字,表示媒体查询必须与您指定的媒体相匹配,并且布局引擎必须满足您放置在它之后的表达式。 -webkit-min-device-pixel-ratio:0 周围的括号只是将其表示为一个表达式。

附录: 是的,这确实意味着您的 CSS 优化器有错误 ;)

【讨论】:

我想我刚刚遇到了同样的错误 - YUI Compressor。 @Matt Ball:哦,那你或许应该提交一份报告。 Just did,虽然显然我在写 "WikiSyntax" 时很笨...我到处都需要 MarkDown,该死 @MattBall - 与 YUI 相同的问题【参考方案2】:

这里是 YUI 压缩器的特殊注释的快速解决方法。

@media screen and/*!*/(-webkit-min-device-pixel-ratio:0)  ... 

该问题已在当前 (2.4.5) 版本中修复

https://github.com/yui/yuicompressor/blob/master/src/com/yahoo/platform/yui/compressor/CssCompressor.java#L180

【讨论】:

+1 用于此快速修复。我正在使用 'yuicompressor-maven-plugin',它仍在使用 2.4.2。 修复适用于 ajaxminifier ... 非常感谢。语法:@media screen/*!*/and/*!*/(-webkit-min-device-pixel-ratio:0)【参考方案3】:

只用这个:

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


【讨论】:

请解释一下? 使用这个来为基于 WebKit 的浏览器应用 CSS ,把它想象成 (webkit) 做某事

以上是关于“@media screen and (-webkit-min-device-pixel-ratio:0)”的语义是啥?的主要内容,如果未能解决你的问题,请参考以下文章