REM 单元是否无法用于媒体查询？如何更新根字体大小？答案

【问题标题】：Are REM units unusable with media queries? How to update root font-size?REM 单元是否无法用于媒体查询？如何更新根字体大小？
【发布时间】：2014-04-18 13:17:57
【问题描述】：

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

【问题讨论】：

标签： css media-queries font-size

【解决方案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。

【讨论】：