如何在CSS中渲染rem单元？

Question

关于自CSS3以来引入的rem单元，它是仅在页面刷新时呈现的吗？如果调整网页的大小以进行响应性测试，那么字体大小定义为rem单元的文本是否也会动态调整大小？

Answer 1

rem引用html元素中定义的根字体大小。因此，如果动态更改字体大小，则会调整元素的大小，否则不会。

Answer 2

rem大小基于您的html字体大小。看下面的代码（或者这个fiddle）。

HTML：

<p>
  Lorem
</p>

<p>
  Ipsum
</p>

<p>
  Dolor
</p>

<p>
  Sit
</p>

<p>
  Amet
</p>

CSS：

html {
  font-size: 24px;
}

p:nth-child(1) {
  font-size: 1rem;
}

p:nth-child(2) {
  font-size: 2rem;
}

p:nth-child(3) {
  font-size: 3rem;
}

p:nth-child(4) {
  font-size: 4rem;
}

p:nth-child(5) {
  font-size: 5rem;
}

@media screen and (max-width: 600px) {
  html {
    font-size: 12px;
  }
}