了解和使用CSS中的rem单位

什么是雷姆单位？

在收听广播或音乐播放器之前，您可能遇到过“ REM”一词。与他们的音乐同伴不同，它们在深度睡眠期间被称为“快速眼动”，而CSS rem则代表“ root em”。他们不会使您失去宗教信仰，也不会相信月球上的男人。他们可以做的是帮助您实现和谐均衡的设计。

根据W3C规范，一个rem单位的定义是：

等于font-size根元素上的计算值。在font-size根元素的属性上指定时，rem单位是指属性的初始值。

这意味着1rem等于该html元素的字体大小（对于大多数浏览器而言，其默认值为16px）。

新建一个前端学习qun438905713，在群里大多数都是零基础学习者，大家相互帮助，相互解答，并且还准备很多学习资料，欢迎零基础的小伙伴来一起交流。

Rem单位对Em单位

em单位的主要问题是它们与自己元素的字体大小有关。因此，它们会级联并导致意外结果。让我们考虑以下示例，在此示例中，如果12px根字体大小是默认字体，则我们希望列表的字体大小为16px：

<span style="color:#000000"><code class="language-css"><span style="color:#669900">html</span> <span style="color:#999999">{</span>
<span style="color:#990055">font-size</span><span style="color:#999999">:</span> 100%<span style="color:#999999">;</span>
<span style="color:#999999">}</span>

<span style="color:#669900">ul</span> <span style="color:#999999">{</span>
<span style="color:#990055">font-size</span><span style="color:#999999">:</span> 0.75em<span style="color:#999999">;</span>
<span style="color:#999999">}</span></code></span>

如果我们有一个嵌套在另一个列表中的列表，则内部列表的字体大小将为其父字体大小的75％（在本例中为9px）。我们仍然可以通过以下方式克服此问题：

<span style="color:#000000"><code class="language-css"><span style="color:#669900">ul ul</span> <span style="color:#999999">{</span>
<span style="color:#990055">font-size</span><span style="color:#999999">:</span> 1em<span style="color:#999999">;</span>
<span style="color:#999999">}</span></code></span>

这可以解决问题，但是我们仍然必须非常注意嵌套变得更深的情况。

使用rem单位，事情变得更简单：

<span style="color:#000000"><code class="language-css"><span style="color:#669900">html</span> <span style="color:#999999">{</span>
<span style="color:#990055">font-size</span><span style="color:#999999">:</span> 100%<span style="color:#999999">;</span>
<span style="color:#999999">}</span>

<span style="color:#669900">ul</span> <span style="color:#999999">{</span>
<span style="color:#990055">font-size</span><span style="color:#999999">:</span> 0.75rem<span style="color:#999999">;</span>
<span style="color:#999999">}</span></code></span>

由于所有大小都是从根字体大小引用的，因此不再需要在单独的声明中覆盖嵌套大小写。

带Rem单位的字体大小

使用rem单位进行字体大小调整的先驱之一是Jonathan Snook，他在2011年5月发表了REM字体大小调整文章。像许多其他CSS开发人员一样，他不得不面对em单位带来的复杂布局问题。

当时，较旧版本的IE仍占有较大的市场份额，因此无法缩放带有像素大小的文本。但是，正如我们前面所看到的，使用em单元很容易迷失嵌套并获得意想不到的结果。

使用rem进行字体大小调整的主要问题是使用这些值有些困难。让我们看一个以rem单位表示的常见字体大小的示例，当然，假定基本大小为16px：