它应该是这样工作的，如果你不知道发生了什么，它会有点混乱。
如果你在媒体查询声明中没有使用rem，那么它们将基于根html的基本字体大小，如果你没有声明，那么在大多数现代的网页浏览器中它是16 px。
因为你已经声明了它为10px，所以rem在你的代码中将是10px，不像em，它是基于最近的父声明大小。
混乱的地方在于媒体查询声明并不基于应用于html的声明字体大小，而是总是使用默认大小--正如我所说的，几乎所有浏览器都是16 px。
这就是为什么50rem被称为800px-16px * 50。

注意，这仅适用于媒体查询断点的声明，如果您在媒体查询中分配了1 rem高的内容，则它将基于基本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单位相对于font-size的初始值，由用户代理或用户首选项定义，而不是页面上的任何样式。
因此，应用于基本字体大小的任何样式都不会影响媒体查询计算。
这是说明书的相关部分。
如果你真的想使用rem并且让他们使用10 px的字体大小，你可以写一个SASS mixin来为你做转换，除此之外，对于媒体查询，坚持使用px可能会更容易混淆。

媒体查询中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 CSS规范：
当在元素的上下文之外使用时（例如在媒体查询中），这些单位指的是与字体属性的初始值相对应的计算字体度量。
因此，在本例中，媒体查询rem指的是font属性的初始值（默认浏览器的font-size = 16px）。