css – 使用Chrome中的rem单元进行媒体查询？

是否可以在Chrome媒体查询中使用rem单位？

rem单元在Chrome中完美运行,似乎它们在媒体查询中不受支持.这可能吗？或者这个CSS有什么问题吗？

body { background-color: yellow; }

@media only all and (max-width: 40rem) {
    body { background-color: red; }
}

@media only all and (min-width: 40rem) and (max-width: 60rem) {
    body {background-color: green;}
}

@media only all and (min-width: 60rem) {
    body { background-color: blue; }
}

活在http://jsfiddle.net/jsQ2N/2/show/,em-only版本在http://jsfiddle.net/jsQ2N/3/show/.

解决方法

The spec says this关于rem和em等相关单位：

Relative units in media queries are based on the initial value,which means that units are never based on results of declarations. For example,in HTML,the ‘em’ unit is relative to the initial value of ‘font-size’.

(font-size的初始值为medium,通常等于浏览器用户首选项中的默认字体大小设置.)

由于除了相对单位的上述引用之外,媒体查询3没有为任何特定单元定义特殊规则,因此rem应该像em一样工作,处理font-size的初始值.如果它在Chrome中不起作用,则很可能是一个错误.