“@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)”的语义是啥?的主要内容,如果未能解决你的问题,请参考以下文章