在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/。

- gioele

---

看起来这个问题可以使用“em”单位解决。在媒体查询层面，1em应该等于1rem（或者像https://github.com/scottjehl/Respond/issues/18#issuecomment-2205078建议的那样）。 - gioele

Chrome 28.0.1500.95 支持在媒体查询中使用 rem 单位，但显然 Safari 5.1 不支持... - ericsoco

Answer 1

规范中对于相对单位，如rem和em，有以下说明：

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

（font-size 的初始值是“medium”，通常等于浏览器用户首选项中的默认字体大小设置。）

由于媒体查询3没有为除上述关于相对单位之外的任何特定单位定义特殊规则，因此rem应像em一样按照font-size的初始值进行操作。如果在Chrome中无法正常工作，则可能是一个错误。

- BoltClock

---

按照相同的逻辑，它也无法获取em的相对font-size！ - CourtDemone

@CourtDemone：你说得对。我写那段代码时可能有些糊涂了。已经修复了。 - BoltClock

Answer 2

原来这是Webkit问题#78295（截止至2012年08月仍未解决）：支持CSS中rem单位的媒体查询（参考http://fvsch.com/code/bugs/rem-mediaquery/）。

- gioele

---

嗯，_报告者们说_这是一个bug，也因为它在其他引擎中可以正常工作。Chrome开发人员尚未发表意见。 - gioele

经过几个小时的混乱，似乎在@media规则中使用rem会破坏Safari中的样式。em和px可以正常工作。奇怪。 - sheriffderek

Answer 3

在回答下面的问题后，我对这个问题感到困扰。我在Chrome上对我正在使用的网站进行了更多的测试。有关rem在Chrome中存在错误的帖子是正确的，它们不起作用，因此我将更改为像素以适应媒体查询。

回答您的问题，对我来说，使用媒体查询调整内容区域的高度时，rem可以正常工作。Chrome解释浏览器宽度的方式似乎与Firefox不同，但这不是基于rem的问题。

请记住，当我使用rem和em时，是在设置font-size: 1em;或font-size: 16px;之后对html或body进行的。我倾向于在html标签上坚持使用font-size: 1em;。这会创建一个默认值，该默认值适用于用户设置的默认字体大小以及他们使用的任何设备。Rem相对于1em的根值。该根值由用户的默认字体大小给出，因此一切都应根据用户的字体大小偏好进行缩放，并且与设备/像素密度无关。

这意味着无论用户使用“正常”的72或96像素/英寸设备还是Retina（或其他高像素密度屏幕），一切都应该从设备到设备看起来“相对”相同。

- Max West