了解和使用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单位带来的复杂布局问题。

扫描二维码关注公众号，回复： 9353243 查看本文章

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

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

10px = 0.625rem
12px = 0.75rem
14px = 0.875rem
16px = 1rem（基本）
18px = 1.125rem
20px = 1.25rem
24px = 1.5rem
30px = 1.875rem
32px = 2rem

如我们所见，这些值对于进行计算不是很方便。因此，Snook使用了一个名为“ 62.5％ ” 的技巧。无论如何，这并不是一个新发现，因为它已经与em单元一起使用：

<span style="color:#000000"><code class="language-css"><span style="color:#669900">body</span> <span style="color:#999999">{</span> <span style="color:#990055">font-size</span><span style="color:#999999">:</span>62.5%<span style="color:#999999">;</span> <span style="color:#999999">}</span> <span style="color:#708090">/* =10px */</span>
<span style="color:#669900">h1</span> <span style="color:#999999">{</span> <span style="color:#990055">font-size</span><span style="color:#999999">:</span> 2.4em<span style="color:#999999">;</span> <span style="color:#999999">}</span> <span style="color:#708090">/* =24px */</span>
<span style="color:#669900">p</span> <span style="color:#999999">{</span> <span style="color:#990055">font-size</span><span style="color:#999999">:</span> 1.4em<span style="color:#999999">;</span> <span style="color:#999999">}</span> <span style="color:#708090">/* =14px */</span>
<span style="color:#669900">li</span> <span style="color:#999999">{</span> <span style="color:#990055">font-size</span><span style="color:#999999">:</span> 1.4em<span style="color:#999999">;</span> <span style="color:#999999">}</span> <span style="color:#708090">/* =14px? */</span></code></span>

由于rem单位是相对于根元素的，因此Snook解决方案的变体变为：

<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> 62.5%<span style="color:#999999">;</span> <span style="color:#999999">}</span> <span style="color:#708090">/* =10px */</span>
<span style="color:#669900">body</span> <span style="color:#999999">{</span> <span style="color:#990055">font-size</span><span style="color:#999999">:</span> 1.4rem<span style="color:#999999">;</span> <span style="color:#999999">}</span> <span style="color:#708090">/* =14px */</span>
<span style="color:#669900">h1</span> <span style="color:#999999">{</span> <span style="color:#990055">font-size</span><span style="color:#999999">:</span> 2.4rem<span style="color:#999999">;</span> <span style="color:#999999">}</span> <span style="color:#708090">/* =24px */</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> 62.5%<span style="color:#999999">;</span>
<span style="color:#999999">}</span>

<span style="color:#669900">body</span> <span style="color:#999999">{</span>
<span style="color:#990055">font-size</span><span style="color:#999999">:</span> 14px<span style="color:#999999">;</span>
<span style="color:#990055">font-size</span><span style="color:#999999">:</span> 1.4rem<span style="color:#999999">;</span>
<span style="color:#999999">}</span>

<span style="color:#669900">h1</span> <span style="color:#999999">{</span>
<span style="color:#990055">font-size</span><span style="color:#999999">:</span> 24px<span style="color:#999999">;</span>
<span style="color:#990055">font-size</span><span style="color:#999999">:</span> 2.4rem<span style="color:#999999">;</span>
<span style="color:#999999">}</span></code></span>

尽管此解决方案似乎接近“黄金法则”的地位，但有人建议不要盲目使用它。哈里·罗伯茨（Harry Roberts）就使用rem单元写了自己的看法。他认为，尽管62.5％的解决方案使计算更加容易（因为其中的字体大小px是其rem值的10倍），但最终迫使开发人员显式重写其网站中的所有字体大小。

第三种观点来自CSS-Tricks的Chris Coyier。他的解决方案利用了到目前为止我们遇到的所有三个单元。他将根大小保留在中px，将模块保留在rem单位中，将元素保留在模块中，将它们保留为em。这种方法使操作全局大小变得更容易，它可以缩放模块中的类型，而模块内容是根据模块字体大小本身来缩放的。路易斯·拉扎里斯（Louis Lazaris）在CSS中的em单元的力量中讨论了后者的概念。

在下面的示例中，您可以看到Chris的方法如何：

实际上，有一些主要框架，例如Bootstrap 4和Material Design指南，这些框架使用Rem单元确定文本内容的大小。

特别要提到的是Material-UI，这是React组件非常流行的集合。它们不仅以相同的方式调整文本大小，而且还提供了一种实现我们上面提到的“ 10px简化”的机制。

最近的另一个项目Every Layout以一种非常有启发性的方式将em和rem单元结合在一起。它与Chris Coyier的模型轮廓最接近，并且使用em单位强调内联元素，例如SVG图标，跨度或其他类似元素。

如您所见，没有“银弹”解决方案。可能的组合仅受开发人员的想象力限制。

将rems与Media Query Breakpoints一起使用

在媒体查询中使用em或rem单位与“最佳行长”的概念及其对阅读体验的影响密切相关。2014年9月，《粉碎杂志》（Smashing Magazine）发表了一篇有关网页排版的综合研究报告，名为《尺寸问题：在响应式网页设计中平衡行长和字体大小》。在许多其他有趣的事情中，文章对最佳行长进行了估算：介于45到75-85个字符之间（包括空格和标点符号），其中65个为“理想”目标值。

使用1rem = 1个字符的粗略估计，我们可以采用移动优先的方法来控制单列内容的文本流：

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

<span style="color:#0077aa">@media <span style="color:#999999">(</span><span style="color:#990055">min-width</span><span style="color:#999999">:</span> 85rem<span style="color:#999999">)</span></span> <span style="color:#999999">{</span>
<span style="color:#669900">.container</span> <span style="color:#999999">{</span>
<span style="color:#990055">width</span><span style="color:#999999">:</span> 65rem<span style="color:#999999">;</span>
<span style="color:#999999">}</span>
<span style="color:#999999">}</span></code></span>

但是，关于rem和em单位用作媒体查询单位时，有一个有趣的细节：它们始终保持相同的值1rem = 1em =浏览器设置的字体大小。媒体查询规范（添加了重点）中说明了这种现象的原因：

媒体查询中的相对单位基于初始值，这意味着单位绝不会基于声明的结果。例如，在HTML中，em单位是相对于font-size的初始值的，它由用户代理或用户的首选项定义，而不是页面上的任何样式。

让我们看一下这种行为的简单示例：

在CodePen上查看媒体查询演示

首先，在HTML中，我们有一个<span>元素将在其中写入视口的宽度：

<span style="color:#000000"><code class="language-markup">Document width: <span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>span</span><span style="color:#999999">></span></span><span style="color:#990055"><span style="color:#990055"><span style="color:#999999"></</span>span</span><span style="color:#999999">></span></span>px</code></span>

接下来，我们有两个媒体查询，一个带有rem单位，另一个带有em单位（为简单起见，使用Sass）：

<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> 62.5%<span style="color:#999999">;</span> <span style="color:#708090">/* 62.5% of 16px = 10px */</span>

<span style="color:#0077aa">@media <span style="color:#999999">(</span><span style="color:#990055">min-width</span><span style="color:#999999">:</span> 20rem<span style="color:#999999">)</span></span> <span style="color:#999999">{</span>
<span style="color:#708090">/* 20*16px = 320px */</span>
<span style="color:#990055">background-color</span><span style="color:#999999">:</span> lemonchiffon<span style="color:#999999">;</span>
<span style="color:#990055">font-size</span><span style="color:#999999">:</span> 200%<span style="color:#999999">;</span>
<span style="color:#708090">/* 200% of 16px = 32px */</span>
<span style="color:#999999">}</span>

<span style="color:#0077aa">@media <span style="color:#999999">(</span><span style="color:#990055">min-width</span><span style="color:#999999">:</span> 30em<span style="color:#999999">)</span></span> <span style="color:#999999">{</span>
<span style="color:#708090">/* 30*16px = 480px */</span>
<span style="color:#990055">background-color</span><span style="color:#999999">:</span> lightblue<span style="color:#999999">;</span>
<span style="color:#990055">font-size</span><span style="color:#999999">:</span> 300%<span style="color:#999999">;</span> <span style="color:#708090">/* 300% of 16px = 48px */</span>
<span style="color:#999999">}</span>
<span style="color:#999999">}</span></code></span>

最后，我们使用一些jQuery在页面上显示视口宽度，并在窗口大小更改时更新值：

<span style="color:#000000"><code class="language-javascript"><span style="color:#dd4a68">$</span><span style="color:#999999">(</span><span style="color:#669900">'span'</span><span style="color:#999999">)</span><span style="color:#999999">.</span><span style="color:#dd4a68">text</span><span style="color:#999999">(</span><span style="color:#dd4a68">$</span><span style="color:#999999">(</span><span style="color:#ee9900">window</span><span style="color:#999999">)</span><span style="color:#999999">.</span><span style="color:#dd4a68">width</span><span style="color:#999999">(</span><span style="color:#999999">)</span><span style="color:#999999">)</span><span style="color:#999999">;</span>

<span style="color:#dd4a68">$</span><span style="color:#999999">(</span><span style="color:#ee9900">window</span><span style="color:#999999">)</span><span style="color:#999999">.</span><span style="color:#dd4a68">on</span><span style="color:#999999">(</span><span style="color:#669900">'resize'</span><span style="color:#999999">,</span> <span style="color:#0077aa">function</span><span style="color:#999999">(</span>e<span style="color:#999999">)</span> <span style="color:#999999">{</span>
<span style="color:#dd4a68">$</span><span style="color:#999999">(</span><span style="color:#669900">'span'</span><span style="color:#999999">)</span><span style="color:#999999">.</span><span style="color:#dd4a68">text</span><span style="color:#999999">(</span><span style="color:#dd4a68">$</span><span style="color:#999999">(</span><span style="color:#ee9900">window</span><span style="color:#999999">)</span><span style="color:#999999">.</span><span style="color:#dd4a68">width</span><span style="color:#999999">(</span><span style="color:#999999">)</span><span style="color:#999999">)</span><span style="color:#999999">;</span>
<span style="color:#999999">}</span><span style="color:#999999">)</span><span style="color:#999999">;</span></code></span>

我们从62.5％的技巧开始，以表明修改后的根字体大小对用于媒体查询的值没有任何影响。当我们更改浏览器窗口的宽度时，我们可以看到第一个媒体查询以320px（20×16px）开始，而第二个媒体查询以480px（30×16px）开始活动。的没有font-size我们宣布改变对断点任何影响。更改媒体查询断点值的唯一方法是在浏览器设置中修改默认字体大小。

因此，我们是否将em或rem单位用于媒体查询断点并不重要。Zurb Foundation（在撰写本文时当前为v6.5.3）在媒体查询中使用em单位。

无障碍探索

上面我们已经看到，基于根字体大小进行缩放的功能使rem单元对于可访问性非常有用。Google开发人员建议使用相对单位进行文本大小调整。

Internet档案后面的人进行了一项实证研究，结果表明，有大量用户在浏览器设置中更改其默认字体大小。通过使用rem和其他相关单位，您可以尊重用户对他们想要浏览网络的方式的决定。

使用rem单位缩放文档

我们可以找到的Rem单元的第三个用途是构建可伸缩的组件。通过以rem为单位表示宽度，边距和填充，可以创建随根字体大小而增长或缩小的界面。让我们通过几个示例来看看这件事是如何工作的。

使用rem单元缩放文档演示＃1

在第一个示例中，我们使用媒体查询来更改根字体大小。就像在上一节中一样，目的是自定义所使用设备的阅读体验。当使用rem表示元素填充值和边距时，整个组件随器件尺寸而缩放。

让我们看看另一个：

在第二个示例中，我们使用JavaScript进行了相同的更改。这次，用户可以控制界面的大小，并根据自己的需要进行调整。添加一种存储这些自定义值的方法（使用数据库，Cookie或本地存储），您便可以基于用户首选项来拥有个性化系统。

结论

我们在这里结束对CSS rem单元的了解。显然，在我们的代码中使用这些单元有许多优点，例如响应能力，可伸缩性，改进的阅读体验以及在定义组件方面更大的灵活性。Rem单元不是通用的万能解决方案，但是通过精心部署，它们可以解决许多困扰开发人员多年的问题。发挥rems的全部潜力取决于我们每个人。开始您的编辑器，进行实验并与我们其他人分享您的结果。

通过了解文本CSS值可以做的更多事情，充分利用文本。在我们截屏的AtoZ CSS：文本和印刷术中，我们将探讨文本属性，字体属性等。

这不是我们所知道的世界尽头，而是让前端开发人员“ 闪亮快乐的人 ” 走上的另一条路。

前端学习线路

发布了110 篇原创文章 · 获赞 44 · 访问量 11万+

私信关注