4

是否可以在 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/。

4

3 回答 3

12

规范说明了这关于相对单位，例如rem和em：

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

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

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

于 2012-08-30T16:06:36.160 回答
5

事实证明这是 Webkit 问题 #78295（截至 2012 年 8 月未解决）：支持媒体查询中的 CSS rem 单元（通过http://fvsch.com/code/bugs/rem-mediaquery/）。

于 2012-08-30T16:10:34.173 回答
0

在下面发布答案后，这个问题困扰了我。我在 Chrome 中对我正在开发的网站进行了更多测试。关于 rem 是 Chrome 中的错误的帖子是正确的，它们不起作用，所以我将更改为仅用于媒体查询的像素。

*为了回答您的问题，rems 正在帮助我使用媒体查询来调整内容区域的高度。Chrome 对浏览器宽度的解释方式似乎与 Firefox 不同，但这不是基于 rem 的问题。

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

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

于 2012-12-27T23:58:02.593 回答