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

关于rem和em等相关单位的

The spec says this：

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

（font-size的初始值为medium，通常等于浏览器用户偏好设置中的默认字体大小设置。）

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

Answer 2

事实证明，这是Webkit问题＃78295（截至2012-08尚未解决）：Support for CSS rem unit in Media Queries（通过http://fvsch.com/code/bugs/rem-mediaquery/）。

Answer 3

在发布下面的答案之后，这个问题给我带来了麻烦。我在Chrome中使用我正在处理的网站进行了一些测试。关于rem是Chrome中的错误的帖子是正确的，它们不起作用，所以我只是为了媒体查询而改为像素。

*为了回答您的问题，我正在努力使用媒体查询来调整内容区域的高度。 Chrome浏览器的宽度似乎与Firefox有所不同，但这不是基于rem的问题。

请记住，当我使用rems和ems时，它是在设置font-size：1em之后;或font-size：16px;对于HTML或正文。我倾向于坚持使用font-size：1em;在html标签上。这将创建一个默认值，该默认值可以根据用户为其使用的任何设备设置的默认字体大小。 Rem是相对于1em的根值。该根值由用户的默认字体大小给出，因此所有内容都应根据用户的字体大小首选项进行缩放，并且与设备/像素密度无关。

这意味着用户是使用“普通”72或96像素/英寸设备，还是使用Retina（或其他高像素密度屏幕），从设备到设备，所有内容应该看起来“相对”相同。

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

3 个答案: