css - Rem 与媒体查询不兼容？

Question

我正在使用 CSS 断点 来更新我网站上的字体大小。
常规文本会按预期响应，但受使用 rem 值的类影响的文本不会。
谁知道为什么？

(在整页中尝试该片段并调整浏览器大小)

body { font-size: 22px; }
.test { font-size: 2rem; }

@media only screen and (max-width: 1280px) {
	body { font-size: 20px; }
}
@media only screen and (max-width: 1024px) {
	body { font-size: 17px; }
}
@media only screen and (max-width: 800px) {
	body { font-size: 15px; }
}
@media only screen and (max-width: 648px) {
	body { font-size: 18px; }
}

Example
<div class="test">Example</div>

Answer 1

使用 rem 根据“根元素”调整字体大小，因此 rem。根元素实际上是 html 元素，而不是 body。因此，当您随后根据其父元素定义子元素的字体大小时，更改 body 元素的字体大小不再相关。

将示例中的 body 替换为 html，它将正常工作。