【基础】EM 仍是 REM？这是一个问题！

时间 2021-01-29

标签 css html web 浏览器网络 ide 模块化学习测试字体栏目 CSS 繁體版

原文原文链接

简言

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

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

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

1 什么是EM？

em 是相对长度单位。它相对于当前元素字体尺寸，即font-size。举例来讲，若是当前元素的字体是20px，那么当前元素中的1em就等于20px。浏览器

h1 { font-size: 20px } /* 1em = 20px */
p { font-size: 16px } /* 1em = 16px */

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

考虑下面的代码：ide

h1 { font-size: 2em }

这里的h1元素字体大小到底是多少呢？模块化

这时，咱们须要根据<h1>父元素字体的大小，来计算<h1>字体的尺寸大小。若是父元素是<html>，并且<html>的字体大小是16px。就能够计算出<h1>的字体大小是32px，即2*16px。学习

用代码表示以下：测试

html { font-size: 16px }
h1 { font-size: 2em } /* 16px * 2 = 32px */

设置<html>字体的大小通常来讲都不是一个好主意，由于这样重写了用户浏览器的默认设置。相反，可使用百分比值或者根本不声明<html>字体大小。字体

html { font-size: 100% } /* 缺省 16px */

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

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

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

h1 {
  font-size: 2em; /* 1em = 16px */
  margin-bottom: 1em; /* 1em = 32px */
}
p {
  font-size: 1em; /* 1em = 16px */
  margin-bottom: 1em; /* 1em = 16px */
}

上述<h1>和<p>的margin-bottom都是1em，可是外边距结果值却不相同。上述现象的出现，是由于em是相对于当前元素字体的大小。因为<h1>中的字体大小如今设置为2em，所以<h1>中其它属性的1em值就是 1em = 32px。这里比较容易引发误解的地方。

2 什么是REM？

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

利用上述相同的代码，咱们用 rem 来代替 em，查看margin-bottom的计算值到底是多少？

h1 {
  font-size: 2rem;
  margin-bottom: 1rem; /* 1rem = 16px */
}
p {
  font-size: 1rem;
  margin-bottom: 1rem; /* 1rem = 16px */
}

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

3 REM 仍是 EM?

在项目开发中到底是选用 rem 仍是 em 一直以来争议不断。一些开发人员不使用rem，由于rem使组件不那么模块化。而另外一些开发人员喜欢rem的简单性，使用rem处理全部元素。

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

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

若是属性尺寸要根据元素字体进行缩放，则使用em
其它状况下都使用rem

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

3.1 只使用REM

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

.header {
  font-size: 1rem;
  padding: 0.5rem 0.75rem;
  background: #7F7CFF;
}

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

变动CSS代码以下：

.header {
  font-size: 1rem;
  padding: 0.5rem 0.75rem;
  background: #7F7CFF;
}
.header-large {
  font-size: 2rem;
}

运行结果以下：

从上述运行结果能够看出，文字的内边距（padding）太小，显示效果不协调。若是咱们坚持只使用rem，只能变动css代码以下：

.header {
  font-size: 1rem;
  padding: 0.5rem 0.75rem;
  background: #7F7CFF;
}
.header-large {
  font-size: 2rem;
  padding: 1rem 1.5rem;
}

变动后运行结果以下：

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

这时能够利用em能够变动上述代码以下：

.header {
  font-size: 1rem;
  padding: 0.5em 0.75em;
  background: #7F7CFF;
}
.header-large {
  font-size: 2rem;
}

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

演示代码

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

3.2 只使用EM

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

咱们变动上述代码以下（em替换rem）：

.header {
  font-size: 1em;
  padding: 0.5em 0.75em;
  background: #7F7CFF;
}
.header-large {
  font-size: 2em;
}

为更接近实际，咱们引入了<p>元素，并变动html代码以下：

<div class="header header-large">名人名言</div>
<p>简单是稳定的前提</p>
<div class="header">名人名言</div>
<p>简单是稳定的前提</p>

增长p元素css代码以下：

p {
    padding: 0.5em 0.75em;
}

运行结果以下：

从上述运行经果中，不难看出.header-large部分的标题并无和文本左对齐。而若是只使用em实现左对齐，则须要变动CSS代码以下：

.header {
  font-size: 1em;
  padding: 0.5em 0.75em;
  background: #7F7CFF;
}
.header-large {
  font-size: 2em;
  padding-left: 0.375em;
  padding-right: 0.375em;
}

变动后运行结果以下：

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

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

.header {
  padding: 0.5em 0.75rem;
  font-size: 1em;
  background: #7F7CFF;
}

.header-large {
  font-size: 2em;
}

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

演示代码

3.3 EM仍是REM总结

到底是该使用em仍是rem呢？答案应该是结合使用rem和rem。当属性值的大小须要根据当前元素字体尺寸缩放时，就选用em，其它的状况都使用更简单的rem。

4 em及rem值的设定

em和rem 属性值都要通过计算转化成绝过长度单位。经常使用的字体尺寸用相对长度单位表示会很困难。看下面经常使用字体值的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%"技术。具体请查看下述代码：

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

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

而rem，则须要采用以下的方式：

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

5 响应式例子

一个简单的响应式的例子，调整浏览器宽度查看演示效果。

演示代码

6 参考资料

7 说明

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