在使用rem单位时，在Google Chrome（或Firefox）中的结果并不是预期的。我设置了一个以根字号大小为10px的页面，以便更轻松地将基于像素的设计转换为html / css。
这是我的css。我期望的是一个宽度为500px的框，并且如果屏幕宽度超过500px，则背景应变为红色。
html {
font-size: 10px;
}
@media screen and (min-width: 50rem){
body{
background-color: red;
}
}
.test{
width: 50rem;
background: black;
height:100px;
}
然而，尽管两个值均定义为50rem，结果是一个宽度为500像素的框，在800像素处页面变红。
https://jsfiddle.net/tstruyf/puqpwpfj/4/
我做错了什么或为什么会这样？
这是它的工作原理，如果您不知道发生了什么，可能会有点混淆。
如果您在媒体查询声明中没有使用rem，则它们将基于根HTML基础字体大小。如果您没有声明它，则在大多数现代Web浏览器中，它为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)
}
}
你没有做错任何事情，这是媒体查询中rem单位的正常工作方式。根据规范：
在媒体查询中使用的相对单位是基于初始值的，也就是说单位永远不会基于声明结果。例如，在HTML中，em单位是相对于字体大小的初始值而定义的，由用户代理或用户的首选项决定，而不是页面上的任何样式。
因此，您对基础字体大小应用的任何样式都不会影响媒体查询的计算。
如果您真的想使用rem，并希望它们以10px为基础字体大小，您可以编写一个SASS mixin来进行转换。除此之外，对于媒体查询来说，使用像素可能会更少让人困惑。
在媒体查询中，1rem的大小不受基础字体大小的更改影响。但您可以自己计算正确的断点。您可以根据新的基础字体大小和所需的rem大小计算以像素为基础的断点。
pixels = desired-rem-value * current-base-font-size
18px和在20 "rem"处的断点：
20 * 18px = 360px
如何计算像素值有几种选择：
1. 手动计算：
html {
font-size: 18px;
}
/* For a breakpoint at 20 times your base font size*/
@media(min-width: 360px) {
...
}
2. 使用 calc()：
@media(min-width: calc(20 * 18px)) {
...
}
3. 使用CSS预处理器函数： （例如在SCSS或类似的工具中使用。）
$base-font-size: 18px;
html {
font-size: $base-font-size;
}
@function media-rem($rem) {
@return $rem * $base-font-size; // $rem must be unitless
}
@media(min-width: media-rem(20)) {
...
}
因此，在这种情况下，当在元素上下文之外使用时（例如在媒体查询中），这些单位指的是与字体属性的初始值对应的计算字体度量。
rem 引用 font 属性的初始值（默认浏览器的 font-size = 16px）的哪个媒体查询。
em和rem来自于排版领域，我通常只在处理字体时使用它们，以及当我希望其他元素与文本保持比例时使用。 - sjahan