css - 在媒体查询中使用 rem 单位作为宽度

Question

在 Google Chrome(或 firefox)中使用 rem 单位时，结果出乎意料。我设置了一个根字体大小设置为 10px 的页面，以便更轻松地将基于像素的设计转换为 html/css。

这是我的CSS。我的期望是一个页面有一个 500 像素宽的框，如果屏幕宽度超过 500 像素，背景应该变成红色。

html {
font-size: 10px;
}

@media screen and (min-width: 50rem){
  body{
    background-color: red;
  }
}

.test{
  width: 50rem;
  background: black;
  height:100px;
}

但是，尽管两个值都定义为 50rem，结果是一个 500px 宽的框，页面在 800px 处变为红色。

https://jsfiddle.net/tstruyf/puqpwpfj/4/

我做错了什么或为什么会这样？

Answer 1

它本来就是这样工作的，如果你不知道发生了什么，它会有点困惑。

如果您没有在媒体查询声明中使用 rem，那么它们将基于根 html 基本字体大小。如果您不声明它，那么在大多数现代网络浏览器中它是 16px。

因为您已将其声明为 10px，所以在您的代码中 rem 将是 10px。与 em 单位不同，它基于最接近的父声明大小。

令人困惑的是，媒体查询声明并不以您应用于 html 的声明字体大小为基础，而是始终使用默认大小 - 正如我所说，几乎是 16px所有浏览器。

这就是为什么 50rem 会变成 800px - 16px * 50。

注意，这仅适用于媒体查询断点的声明，如果您在媒体查询中指定了 1rem 高的东西，那么它将基于基本 html 大小。

html {
  font-size: 10px;
}

@media screen and (min-width: 50rem){ // 800px (uses base font-size)
  div.somediv {
    width: 50rem; // 500px (uses the declared html font-size)
  }
}