媒体查询的 rem 与其他任何东西的 rem

Question

根据 CSS Values and Units Module Level 3 关于 rem 值：

Equal to the computed value of font-size on the root element. When specified on the font-size property of the root element, the rem units refer to the property’s initial value

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

所以对我来说，@media 查询 “读取” 1rem 的值来设置断点，但是如果 :root {} ruleset 在里面，它也“设置” 1rem 的值，导致定义中的循环。

我错过了什么？

举个例子，在下面的代码片段中，如果您在断点 (same snippet on JSFiddle, where resizing of the panels is a bit easier) 周围调整 window 的大小，您会看到椭圆的大小（其中有 width: 50rem;)变了，就是说越过断点，1rem的意思就变了，也就是真正越过断点，从:root { font-size: 0.5em; }切换到:root { font-size: 2rem; }。

据我所知，这最终意味着我们成功地更改了 :root 元素上 font-size 的计算值。

如果是这样，怎么可能使用 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

来自相同规格：

When used outside the context of an element (such as in media queries), these units refer to the computed font metrics corresponding to the initial values of the font property.

所以 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>

媒体查询的 rem 与其他任何东西的 rem

rem of media queries vs rem of anything else

html

css

media-queries

language-lawyer

font-size