Question

我使用 CSS断点来更新我网站上的字体大小。
常规文字会按预期响应，但使用 rem 值影响课程的文字不会出现。
任何人都知道为什么？

（在整页中尝试使用代码段并调整浏览器大小）

＆＃13;

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; }
}

＆＃13;

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

＆＃13;

Answer 1

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

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

Answer 2

您在错误的元素上设置font-size。 rem是根 em单元。文档根目录不是body，而是html。

如果您更改body引用的所有html引用，一切都会正常工作。

Rem与媒体查询不兼容？

2 个答案: