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。

REM单元是否无法用于媒体查询？如何更新root font-size？

1 个答案: