Css REM单元是否不能用于媒体查询？如何更新根字体大小？

所以，我有一个网站使用大量的“ems”字体，它们无处不在。我设法用rems替换了它们，现在我的媒体查询似乎不起作用了，因为我一直在更改它们的根字体大小

以下是HTML：

<div id="em">
   <h1>EMs are better?</h1>
    <p>A text.</p>
</div>

<div id="rem">
   <h1>REMs aren't?</h1>
   <p>Sad panda.</p>
</div>

尝试调整窗口大小，看看会发生什么，REM框似乎根本没有改变

---

Rem单位基于

html

元素的字体大小，而不是

正文

您的css将更改为：

html { // changed from body to html
    font-size: 14px;
}

div {
    margin: 10px;
    padding: 20px;
    text-align: center;
    background: #efefef;
}

#em h1 { font-size: 2em; }
#em p { font-size: 1em; }

#rem h1 { font-size: 2rem; }
#rem p { font-size: 1rem; }

@media screen and (max-width: 500px) {
  html { // changed from body to html
    font-size: 6px;
    background: red;
  }
}

注意，我们在第一行和媒体查询中以html元素为目标

这是你的修改与rems的工作

html { // changed from body to html
    font-size: 14px;
}

div {
    margin: 10px;
    padding: 20px;
    text-align: center;
    background: #efefef;
}

#em h1 { font-size: 2em; }
#em p { font-size: 1em; }

#rem h1 { font-size: 2rem; }
#rem p { font-size: 1rem; }

@media screen and (max-width: 500px) {
  html { // changed from body to html
    font-size: 6px;
    background: red;
  }
}