Understand and use rem units in CSS

什么是 rem

可能在你使用收音机或者用其他音乐播放器之前，就已经听过“R.E.M.”这个词了。在这个乐队眼中，这个词是“浅睡眠时眼球的快速转动”的缩写，而在 css 中，rem 代表着“以根元素为参照物的 em 单位“。他不会让你抛弃你的宗教信仰也不会让你相信那个远在月球的人，但是它可以帮助你实现一个和谐、平稳的设计。

根据 W3C 规范中对 1rem 的定义：

1rem 与等于根元素 font-size 的计算值。当明确规定根元素的 font-size 时，rem 单位以该属性的初始值作参照。

这就意味着 1rem 等于 html 元素的字体大小(大部分浏览器根元素的字体大小为16px)

Rem 单位 vs Em 单位

使用 em 单位最主要的问题是他们与用户元素相关联。在这种情况下，这些元素可以相互嵌套并且造成意想不到的结果。我们来思考下面一个例子，在根元素的文字大小为默认值16px 的情况下，我们想要所有列表的字体大小均为 12px :

html { 
  font-size: 100%; 
} 
 
ul { 
  font-size: 0.75em; 
}

假如有一个列表是嵌套在另一个列表下，那么内列表的字体大小将会是外列表字体大小的 75%(也就是 9px )，我们仍然可以通过几行代码来解决这个问题：

ul ul { 
  font-size: 1em; 
}

这样就可以解决这个问题，然而我么仍需要特别关注那些嵌套特别深的元素。

当使用 rem 单位后，事情就变得简单了：

html { 
  font-size: 100%; 
} 
 
ul { 
  font-size: 0.75rem; 
}

当所有尺寸都以根元素的文字大小作为参照后，就不再需要为嵌套的元素单独定义样式了。

使用 rem 单位定义文字大小

Jonathan Snook 是第一批使用 rem 单位来定义文字大小的开发者，早在 2011 年 5 月，他就发表了题为《使用 rem 来定义文字大小》 的文章。和大多数 CSS 开发者一样，他必须去解决在 em 单位在复杂的布局上的一系列问题。

在那时候，老版本的 IE 依然有很大的市场份额，并且他们不可以缩放由 px 来定义的文本。然而，就像我们之前看到的那样，在使用 em 单位的情况下，很容易忘记元素之前的嵌套关系，并且得到一个意想不到的结果。

使用 rem 单位来定义文字的大小最大的问题在于这些值有点难以使用。让我们来看一个例子，假设根元素的文字大小是 16px，我们常用的文字大小转换为 rem 值如下：

10px = 0.625rem

12px = 0.75rem

14px = 0.875rem

16px = 1rem (base)

18px = 1.125rem

20px = 1.25rem

24px = 1.5rem

30px = 1.875rem

32px = 2rem

正如我们看到的那样，这些值在计算起来非常不方便。因此，Snook 使用一个叫 62.5 的方式来解决这个问题。然而这并不是一个创新，因为它早已在 em 单位中运用了：

body { font-size:62.5%; }  /* =10px */ 
h1   { font-size: 2.4em; } /* =24px */ 
p    { font-size: 1.4em; } /* =14px */ 
li   { font-size: 1.4em; } /* =14px? */

因为 rem 单位与根元素相关联，Snook 改进后的方案变为了：

html { font-size: 62.5%; } /* =10px */ 
body { font-size: 1.4rem; } /* =14px */ 
h1 { font-size: 2.4rem; } /* =24px */

有一点值得考虑的是有一些浏览器不支持 rem 单位。因此上面的代码可以按照以下方式来改写

html { 
    font-size: 62.5%; 
} 
 
body { 
    font-size: 14px; 
    font-size: 1.4rem; 
} 
 
h1 { 
    font-size: 24px; 
    font-size: 2.4rem; 
}

尽管这个解决方案看起来是最好的解决方案，但还是有人不建议使用这种方式。Harry Roberts 写了一篇文章，里面记录了他在实际使用 rem 单位过程中的一些感受。从他的观点来看，虽然 62.5% 这种解决方案使得计算变得简单(因为字体大小以 px 为单位时的值正好是以 rem 为单位的 10 倍)，但是他迫使开发者重写他们网站中的所有文字大小。

Chris Coyier 在 CSS-Tricks 提出了第三种解决方案。他的解决方式充分利用了到目前为止我们遇到的三种单位。根元素的长度单位依旧采用 px ，模块用 rem 单位，模块内的元素使用 em 单位。这种方式可以很容易的操作根元素的大小、缩放模块，模块内内容的大小以模块自身文字大小来进行缩放。Louis Lazaris 随后在 CSS 中 em 单位的强大之处 提出了他的观点。

在下面的例子中你可以看出 Chris 的解决方案是怎么工作的：

代码可以看 SitePoint(@SitePoint点击预览) 在 CodePen 写的 《在 CSS 中使用 em 和 rem 单位的方式》点击预览。

正如你看到的那样，没有利用新技术来解决这个问题。可能一些组合方式仅仅被开发者的想象力所限制。

在媒体查询中使用 rem 单位

在媒体查询中利用 em 和 rem 单位，与“行的最佳长度”的概念密切向关，并能给用户带来流畅的阅读体验。在 2014 年 9 月，Smashing Magazine 在 web typography 发表了一篇名叫 尺寸那些事: 在 web 响应式设计中掌握文字大小与行宽度的平衡的文章。最有意思的是，文章给出了行的最佳宽度度，45 到 85 个字符(包括空格和标点符号)，65 是最理想的行宽值。

粗略的估计一个字节大小就是 1rem，利用这个方法我们就可以用一种移动优先的方式控制内容的单行文本流：

.container { 
  width: 100%; 
} 
 
@media (min-width: 85rem) { 
  .container { 
    width: 65rem; 
  } 
}

然而在媒体查询中使用 em 和 rem 单位作为媒体查询的条件时有一个有意思的细节：1 rem，1em 还有浏览器默认文字大小这三值表示这同一个值。这样做的原因可以在媒体查询规范得到解释(特别强调):

询中相对单位都是以一个初始值作为基准，这就意味着这些单位永远不会基于声明的结果。例如：在 HTML 中，em 单位与用户浏览器或者用户偏好设置中设置的初始文字大小有关，而不是页面上的样式中定义的文字大小。

让我们看一个关于这个特性的一个小例子：

在 CodePen 上看一个关于媒体查询的 demo

首先，在我们的 HTML 文档中，有一个元素将会展现视口的宽度：

`Document width: <span></span>px`

接下来是两条媒体查询语句，一条是使用 rem 单位，另一条使用 em 单位(这里为了简便，使用了 Sass)

html { 
  font-size: 62.5%; /* 62.5% of 16px = 10px */ 
 
  @media (min-width: 20rem) { 
    /* 20*16px = 320px */ 
    background-color: lemonchiffon; 
    font-size: 200%; 
    /* 200% of 16px = 32px */ 
  } 
 
  @media (min-width: 30em) { 
    /* 30*16px = 480px */ 
    background-color: lightblue; 
    font-size: 300%; /* 300% of 16px = 48px */（译：原文是48px） 
  } 
}

最后，我们使用一点 jQuery 在页面上显示视口的宽度，并且在窗口缩放的时候更新这个值：

$('span').text($(window).width()); 
 
$(window).on('resize', function(e) { 
  $('span').text($(window).width()); 
});

在开头，我们使用了 62.5% 这个方法来说明，修改根元素字体大小不会对媒体查询产生任何影响。当我们更改窗口的宽度时，我们可以看到在 320 px 时，第一条媒体查询开始起作用，到480px第二条媒体查询开始起作用。任何一条在媒体查询中对文字大小声明的改变都没有起作用。唯一一个可以改变媒体查询中宽度的是在浏览器里更改默认文字大小。

因为这个原因，在媒体查询语句中使用 em 单位还是 rem 单位已经不那么重要了。事实上，无论是Foundation v5还是最近刚发布的Bootstrap v4 alpha都在他们的媒体查询中使用了 em 单位。

使用 rem 单位来缩放文档

我们能发现的第三种使用 rem 单位的方式是去构建可缩放组件。使用 rem 来定义元素的宽度，外边距和内边距 通过使用根元素的字体大小作为一个接口使元素缩放一致变为了可能。 我们可以通过下面两个例子来看这是怎么起作用的。

使用 rem 来缩放文档实例一

在这个例子里，我们通过媒体查询中更改根元素的文字大小。就像上一个章节所讲，这样做的目的是为用户定制不同设备下的不同阅读体验。通过 rem 单位来表示宽度，外边距，内边距，这样所有元素就会基于用户的设备大小缩放。

让我们看另一个例子：

代码可以看 SitePoint(@SitePoint点击预览) 在 CodePen 写的 《使用 rem 动态缩放模块》点击预览

在第二个例子中，我们使用 JavaScript 来做同样的操作。这次用户根据自己的需要手动控制界面的大小。我们可以使用多种方式(可以使用数据库，cookie 还有本地存储)来存储用户数据，这样就可以给用户搭建一个基于用户偏好的个性化系统。

总结

在这里总结一下到目前为止我们对 CSS 中 rem 单位的认识。很显然，在项目中使用 rem 有许多优点，比如：响应式，可缩放，增加阅读体验，增加自定义元素的灵活性。rem 虽然不是一个通用的解决方案，但是通过谨慎的使用，它还是可以解决困扰开发者多年的问题。 我们每个人都可以去挖掘 rem 的所有潜能。从你的编辑器开始吧，实验并向我们分享您的成果。