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

Posted 2023-03-06

【中文标题】在 Chrome 中使用 rem 单位进行媒体查询？

【英文标题】：Media queries with rem units in Chrome?

【发布时间】：2012-08-25 10:12:03

【问题描述】：

是否可以在 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/ 的唯一版本。

【问题讨论】：

看起来这个问题可以使用em 单位来解决。在媒体查询级别，1em 应该等于 1rem（或者建议 github.com/scottjehl/Respond/issues/18#issuecomment-2205078>）。

Chrome 28.0.1500.95 确实支持媒体查询中的 rem 单位，但显然 Safari 5.1 不...

【参考方案1】：

The spec says this 关于相对单位，例如rem 和em：

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

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

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

【讨论】：

同样的逻辑，它也无法获得em的相对font-size！

@CourtDemone：你是对的。我不确定我在写这篇文章时在想什么。固定。

【参考方案2】：

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

【讨论】：

好吧，记者说这是一个错误，也因为它可以在其他引擎中运行。 Chrome 开发者还没有发言。

经过几个小时的困惑之后，似乎在@media 规则中使用 rem 会破坏 Safari 中的样式。 em 和 px 工作正常。很奇怪。

【参考方案3】：

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

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

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

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