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

Question

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

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/.

Answer 1

该规范说明了关于两者的相对单位rem和em:

媒体查询中的相对单位基于初始值,这意味着单位永远不会基于声明的结果.例如,在HTML中,'em'单位相对于'font-size'的初始值.

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

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

Answer 2

事实证明,这是Webkit问题#78295(截至2012-08尚未解决):支持媒体查询中的CSS rem单元(通过http://fvsch.com/code/bugs/rem-mediaquery/).