REM vs EM
网页字体排版的最佳实践之一就是使用相对单位，如rem和em.
问题是，你应该使用哪一个呢?一直以来，rem支持者和em支持者之间都存在着争辩，认为应该使用自己支持的那个。
在这篇文章中，你会找到我如何在rem和em之间做抉择.你也将了解rem和em到底是什么以及如何使用它们来构建模块化组件。
什么是EM？
EM 是字体排印的一个单位，等同于当前指定的point-size。-维基百科
此语句在网页上并不能说得过去，因为我们不使用point-size.如果我们用point-size取代font-size的话，这句话就完全行得通。
意思就是，如果存在一个选择器的font-size属性的值为 20px,那么1em=20px
h1 { font-size: 20px } /* 1em = 20px */
p { font-size: 16px } /* 1em = 16px */
值，但这种情况的发生，纯粹是因为继承。**
em单位可以被用来声明字体的大小。实际上，最佳做法是使用相对单位，如用em指定font-size。
考虑如下代码:
h1 { font-size: 2em }
这里h1选择器的真正大小是多少呢？
我们要根据<h1>的父元素来计算font-size。它的父元素是<html>,并且它的font-size被设置为16px。
通过这种方式，我们可以计算出h1的值为32px,或者说2 * 16px.
html { font-size: 16px }
h1 { font-size: 2em } /* 16px * 2 = 32px */
虽然也可以实现，但是这并不被认为是一个好主意，通过在<html>中设置font-size的像素值将影响用户浏览器所设置的值。
取而代之，你可以使用percentage值，或者完全摒弃font-size。
注意:如果你完全摒弃font-size,它的值将被默认为100%.
html { font-size: 100% } /*这里的意思是默认值为16px*/
对于大多数的用户(和浏览器)，font-size的值为100%，就会默认为16px，除非用户通过浏览器设置来改变font-size的默认值。但是很少有人这么做。
好了，让我们回到em。
em也可以用来指定除了font-size的其它属性值。margin和padding属性也经常用em设置大小。
这里是很多人开始对em的值产生困惑的地方。
考虑下面的代码。<h1>和<p>元素的margin-bottom的值应该是多少？(假设<html>的font-size被设置为100%).
h1 {
font-size: 2em; /* 1em = 16px */
margin-bottom: 1em; /* 1em = 32px */
}
p {
font-size: 1em; /* 1em = 16px */
margin-bottom: 1em; /* 1em = 16px */
}
你是不是很吃惊两种状况下的margin-bottom的1em值不同？
这种现象的发生在于1em等同于它当前的font-size。因为<h1>中的font-size被设置为了2em。其他用在<h1>内的em来计算的属性，就为1em = 32px。
在不同的代码中，1em就会有不同的取值，这就是经常迷惑人们的地方。如果你也是刚刚接触em，你也会产生迷惑。
不管怎么说，这就是em.接下来，让我们认识rem。
什么是REM？
rem指根em。它的产生是为了帮助人们解决em所带来的计算问题。
它是字体排版的一个单位，等同于根font-size。这意味着1rem等同于<html>中的font-size。
考虑相同的用rem表示的代码。现在margin-bottom计算出来的值为多少呢？
h1 {
font-size: 2rem;
margin-bottom: 1rem; /* 1rem = 16px */
}
p {
font-size: 1rem;
margin-bottom: 1rem; /* 1rem = 16px */
}
正如您看到的，无论您在哪里设置它，1rem的取值均为16px。
这是十分可靠的，很容易去理解。
这就是rem。一旦你知道了什么是em，就很容易去理解，你是不是也同意这个观点？
现在让我们步入这篇文章的正题，rem 还是 em?
REMs or EMs?
这是极具争议的问题。
一些开发人员完全避免使用rem,声称使用rem会使他们的组件缺少模块化。另外一些人则什么都使用rem,因为喜欢rem所带来的便捷。
奇怪的是，在我的职业生涯中，我掉进了在不同的地方是使用rem或者em的陷阱中。我喜欢em帮助我完成模块化组件，但是讨厌它所带来的代码复杂性。我喜欢rem计算的便捷，但是讨厌他是我模块化组件的阻碍。
事实证明。rem 和 em 均有各自的优缺点。应给根据实际情况来判断其使用方式。
这里我有两个简单的规则：
- 如果这个属性根据它的font-size进行测量，则使用em(当有属性需要用它的字体大小(font-size)进行大小声明时，这时em就相当有用。)
- 其他的一切事物均使用rem.
有一个比较普遍的误解，认为 em 单位是相对于父元素的字体大小。 事实上，根据W3标准 ，它们是相对于使用em单位的元素的字体大小。父元素的字体大小可以影响 em
(默认情况下浏览器通常有字体大小 16px，但这可以被用户更改为从 9px 到 72px的任何值。)
-根 html 元素将继承浏览器中设置的字体大小，除非显式设置固定值去覆盖。
- 所以 html 元素的字体大小虽然是直接确定 rem 值，但字体大小可能首先来自浏览器设置。
- 因此浏览器的字体大小设置可以影响每个使用 rem 单元以及每个通过 em 单位继承的值。
- rem 单位翻译为像素值是由 html 元素的字体大小决定的。 此字体大小会被浏览器中字体大小的设置影响，除非显式重写一个具体单位。
- em 单位转为像素值，取决于他们使用的字体大小。 此字体大小受从父元素继承过来的字体大小，除非显式重写与一个具体单位。
- rem 和 em 单位是由浏览器基于你的设计中的字体大小计算得到的像素值。
- em 单位基于使用他们的元素的字体大小。
- rem 单位基于 html 元素的字体大小。
- em 单位可能受任何继承的父元素字体大小影响
- rem 单位可以从浏览器字体设置中继承字体大小。
- 使用 em 单位应根据组件的字体大小而不是根元素的字体大小。
- 在不需要使用em单位，并且需要根据浏览器的字体大小设置缩放的情况下使用rem。
- 使用rem单位，除非你确定你需要 em 单位，包括对字体大小。
- 媒体查询中使用 rem 单位
- 不要在多列布局中使用 em 或 rem ,改用%。
- 不要使用 em 或 rem，如果缩放会不可避免地导致要打破布局元素。
- 更多区别及配合使用请看原文实例。
