EM 还是 REM？这是一个问题！

简言

应用象 和 这种相对长度单位进行页面排版是WEB开发中的最佳实践。在页面排版中较好应用 和 ，根据设备尺寸缩放显示元素的大小。这就使得组件在不同设备上都达到最佳的显示效果成为可能。

但问题是究竟该用 还是 呢？关于这个问题一直存在比较大的争议。本文将会给大家介绍究竟什么是 和 和如何进行两者的选择，以及结合两者优势构建模块化的WEB组件。

注：本文内容简单，只面向初级开发人员，约2500字，阅读时间5分钟。

1 什么是EM？

是相对长度单位。它相对于当前元素字体尺寸，即。举例来说，如果当前元素的字体是20px，那么当前元素中的1em就等于20px。

实际开发中，用相对长度单位（如 ）表示字体大小是WEB开发中的最佳实践。

考虑下面的代码：

这里的h1元素字体大小究竟是多少呢？

这时，我们需要根据父元素字体的大小，来计算字体的尺寸大小。如果父元素是，而且的字体大小是16px。就可以计算出的字体大小是32px，即2*16px。

用代码表示如下：

设置字体的大小一般来说都不是一个好主意，因为这样重写了用户浏览器的默认设置。相反，可以使用百分比值或者根本不声明字体大小。

对于大多数用户或浏览器，字体缺省大小是16px（未做浏览器缺省字体尺寸设置）。

还能用来指定除字体大小外的其它属性，象或等属性都可以用来表示。

考虑下面的代码， 对于和元素，值应该是多少？ （假设的字号被设置为100％）。

上述和的margin-bottom都是1em，但是外边距结果值却不相同。上述现象的出现，是因为是相对于当前元素字体的大小。由于中的字体大小现在设置为2em， 因此中其它属性的1em值就是 。这里比较容易引起误解的地方。

2 什么是REM？

表示 root em，它是相对于根元素的长度单位。这里根元素就是中定义的字体大小。这意味着任何地方的1rem总是等于中定义的字体大小。

利用上述相同的代码，我们用 来代替 ，查看的计算值究竟是多少？

如上述代码所示，1rem总是等于16px（除非变更了字体的大小）。的大小相较于来说意义更直接明确，也很容易理解。

3 REM 还是 EM?

在项目开发中究竟是选用 还是 一直以来争议不断。一些开发人员不使用，因为使组件不那么模块化。而另一些开发人员喜欢的简单性，使用处理所有元素。

其实 和都有各自的优势和劣势，在实际项目开发中，应该结合使用两者，利用各自的优势，从而实现较好代码质量和显示效果。

那么在具体的应用中如何在两者中做选择呢？有两条简单的指导原则：

如果属性尺寸要根据元素字体进行缩放，则使用

其它情况下都使用

上述规则太简单了。 为了更好的理解上述规则，我们就以一个简单的header组件为例，说明单独使用两者来实现组件遇到的问题，并体会结合使用两者所带来的优势。

3.1 只使用REM

这里我们只使用来编写一个header组件，代码及运行结果如下：

用rem实现header测试图1

接下来，网站需要一个尺寸更大的header组件。

变更CSS代码如下：

运行结果如下：

用rem实现header测试图2

从上述运行结果可以看出，文字的内边距（）过小，显示效果不协调。如果我们坚持只使用，只能变更css代码如下：

变更后运行结果如下：

用rem实现header测试图3

上述代码及运行结果，虽然达到了预期的显示效果，但却违背了代码复用的原则。如果网站有多种尺寸的.header样式，就要多次重复的定义内边距。重复的代码增加了项目复杂度，降低了可维护性。

这时可以利用可以变更上述代码如下：

运行结果请查看演示程序：

演示代码(http://www.42du.cn/run/119)

如上述演示程序所示，当元素属性值的大小需要根据元素字体尺寸缩放时，就应该应用 来定义属性尺寸。这就是前述规则中的第一条规则。

3.2 只使用EM

如果只使用来定义上述组件，结果会怎样呢？

我们变更上述代码如下（替换）：

为更接近实际，我们引入了元素，并变更代码如下：

增加p元素css代码如下：

运行结果如下：

用em实现header测试图1

从上述运行经果中，不难看出部分的标题并没有和文本左对齐。而如果只使用实现左对齐，则需要变更CSS代码如下：

变更后运行结果如下：

用em实现header测试图2

上述代码及运行结果，虽然达到了预期的显示效果，但却违背了代码复用的原则。如果网站有多种尺寸的.header样式，就要多次重复的定义左右边距。重复的代码增加了项目复杂度，降低了可维护性。

解决上述问题的办法是结合使用和，即使用定义上下边距，使用定义左右边距。变更后代码如下：

运行结果请查看演示程序：

演示代码(http://www.42du.cn/run/120)

3.3 EM还是REM总结

究竟是该使用还是呢？答案应该是结合使用和。当属性值的大小需要根据当前元素字体尺寸缩放时，就选用，其它的情况都使用更简单的。

4 em及rem值的设定

和 属性值都要经过计算转化成绝过长度单位。常用的字体尺寸用相对长度单位表示会很困难。看下面常用字体值的表示（基本字体尺寸是16px）：

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

如上述列表所示，上述尺寸值的表示及计算都不分的不便。为了解决上述问题要用到一个小技巧，即著名的 "62.5%"技术。具体请查看下述代码：

通过62.5%的设定，就可以很容易用来定义具体属性的尺寸了（10倍的关系）。

而，则需要采用如下的方式：

5 参考资料

W3C:CSS Values and Units Module Level 3

zellwk:REM vs EM – The Great Debate

sitepoint:Understanding and Using rem Units in CSS

tutsplus:Comprehensive Guide: When to Use Em vs. Rem

css-tricks:Confused About REM and EM?

6 说明

文中所述文字及代码部分汇编于网络。因时间不足，能力有限等原因，存在文字阐述不准及代码测试不足等诸多问题。因此只限于学习范围，不适用于实际应用。另和在较老的浏览器中存在兼容性问题。