在媒体查询和宽度中使用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中，em单位是相对于字体大小的初始值（由用户代理或用户的首选项定义的），而不是页面上的任何样式。

因此，您应用于基本字体大小的任何样式都不会影响媒体查询的计算。

这是规范的相关部分。

如果您真的想使用rem并让他们使用10px的字体大小，则可以随时编写SASS mixin为您进行转换。除此之外，在媒体查询中坚持使用px可能会减少混乱。

Answer 2

它的意思是这样工作，如果您不知道发生了什么，那就有点令人困惑。

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

正如您已将其声明为10pxrem一样，它将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)
  }
}