css - Chrome 中带有 rem 单位的媒体查询？

Question

是否可以在 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 - 仅限 http://jsfiddle.net/jsQ2N/3/show/ 的版本.

Answer 1

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，通常等于浏览器用户首选项中的默认字体大小设置。)

由于 Media Queries 3 没有为除上述相关单位引用之外的任何特定单位定义特殊规则，rem 应该 像 em，处理 font-size 的初始值。如果它在 Chrome 中不起作用，则很可能是错误。