媒体查询的rem与其他任何事物的rem

Question

根据关于rem值的CSS值和单元单元级别3：

等于根元素上字体大小的计算值。当在根元素的字体大小属性上指定时，rem单元引用该属性的初始值。

但是，我甚至可以使用@media查询来更改:root选择器的font-size，并且可以使用rem中的一个数量作为断点。

因此，在我看来，@media查询似乎“读取”1rem的值来设置断点，但是如果其中包含:root {}规则集，它还会“设置”1rem的值，从而导致定义中的循环。

我遗漏了什么？

举个例子，在下面的片段中，如果您调整断点(JSFiddle上的相同片段，其中调整面板的大小要容易一些)周围的窗口大小，您将看到椭圆(有width: 50rem;)的大小发生了变化，这意味着当我们跨越断点时，1rem的含义发生了变化，这意味着我们真正地通过断点从:root { font-size: 0.5em; }切换到:root { font-size: 2rem; }。

我理解，这最终意味着我们正在成功地更改font-size :root 元素上的计算值。

如果是这样的话，如何才能使用rems作为媒体查询的断点？

观察下面片段的结果，我会说断点发生在相同的视口宽度，而不管font-size规则集中如何更改:root {}。

标准的哪一部分解释了我所观察到的？

​

:root {
  box-sizing: border-box;
  margin: 0;
  font-size: 0.5rem;
}
.shape {
  content: "";
  display: block;
  background-color: red;
  border-radius: 100%;
  width: 50rem;
  height: 10rem;
}

@media (min-width: 50rem) {
  .shape {
    background-color: blue;
  }
  :root {
    font-size: 2rem;
  }
}

<div class="shape">
</div>
ciao

​

Answer 1

来自同一规范：

当在元素的上下文之外使用时(例如在媒体查询中)，这些单元引用与字体属性的初始值相对应的计算字体度量。

所以50rem就是50*16px = 800px

​

:root {
  box-sizing: border-box;
  margin: 0;
  font-size: 0.5rem;
}
.shape {
  content: "";
  display: block;
  background-color: red;
  border-radius: 100%;
  width: 50rem;
  height: 10rem;
}

@media (min-width: 50rem) {
  .shape {
    background-color: blue;
  }  
  :root {
    font-size: 2rem;
  }
}
@media (min-width: 800px) {
  .shape {
    outline:10px solid green;
  }
}

<div class="shape">
</div>

​