我们什么时候应该在 css 中使用 rem 单位？

【问题标题】：When exactly should we use rem units in css?我们什么时候应该在 css 中使用 rem 单位？
【发布时间】：2017-11-13 12:39:35
【问题描述】：

根据我从互联网上获得的任何信息，很明显 rem 单位用于指定字体大小。除了字体大小，我们还能在哪里使用这个单元，以及浏览器对它的支持是什么。身高可以用rem吗？

【问题讨论】：

当然没关系，但你为什么要这么做？这是相关的问题。 rem 用于字体大小的原因是因为字体大小是通常需要文档范围一致性的事情之一。如果您的布局需要在某些宽度和高度上保持这种一致性，那么也没有什么能阻止您使用 rems 来实现这些。你只需要考虑推理。
你可以在任何你想使用任何其他单位的地方使用它；它与em 相同，但根据根。浏览器支持IE9+ with caveats until IE11。

标签： css web

【解决方案1】：

当你想使用嵌套元素并且你希望 font-size 比根元素 font-size 测量时。

查看此示例并进行比较。

.em {
    font-size: 0.5em;
}

.rem {
    font-size: 0.5rem;
}

<p>When use Em Unit </p> 
<div class="em">I am Div1
   <div class="em">I am Div2
      <div class="em">I am Div3</div>
   </div>
</div>
<p>When use REM Unit </p> 
<div class="rem">I am Div1
   <div class="rem">I am Div2
      <div class="rem">I am Div3</div>
   </div>
</div>

em unit 测量 font-size 比当前 font-size 导致 font-size 越来越小，但是 rem unit 测量 font-size 比根元素 font-size。

【讨论】：