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

Question

所以，我有一个使用大量“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>

和 CSS:

body {
    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) {
  body {
    font-size: 6px;
    background: red;
  }
}

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

http://jsfiddle.net/Q5vSC/

Answer 1

Rem 单位基于 html 元素的字体大小，而不是 body。

你的 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 元素。

这是您的 jsfiddle修改为与 rems 一起使用。