问题是，你应该使用哪一个呢?一直以来， 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 选择器的真正大小是多少呢？
我们要根据
的父元素来计算 font-size 。它的父元素是 ,并且它的 font-size 被设置为 16px 。
通过这种方式，我们可以计算出 h1 的值为 32px ,或者说 2 * 16px .
html { font-size: 16px }h1 { font-size: 2em } /* 16px * 2 = 32px */ 虽然也可以实现，但是这并不被认为是一个好主意，通过在 中设置 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 的值产生困惑的地方。
考虑下面的代码。
和
元素的 margin-bottom 的值应该是多少？(假设 的 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 。因为
中的 font-size 被设置为了 2em 。其他用在 内的 em 来计算的属性，就为 1em = 32px 。
在不同的代码中， 1em 就会有不同的取值，这就是经常迷惑人们的地方。如果你也是刚刚接触 em ，你也会产生迷惑。
不管怎么说，这就是 em .接下来，让我们认识 rem 。
什么是REM？
rem 指根 em 。 它的产生是为了帮助人们解决 em 所带来的计算问题。
它是字体排版的一个单位，等同于根 font-size 。这意味着 1rem 等同于 中的 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 其他的一切事物均使用 rem .有点太简单了么？让我们考虑用 rem 还是 em ，来书写一个简单的组件(头部元素)，此过程中你就会发现这两个规则发挥的良好作用。
仅使用 rem 来制作标题元素
你有一个看起来如下图所示的标题元素(
)：
如果你用 rem 设置一切属性的大小，标题元素的样式应该和上图相似：
.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;} 不幸的是，这个代码并不能实现效果。你会发现在 .header--larger 下，文本和边缘的空间太小。
如果你坚持使用 rem ，唯一的办法就是使用 padding 重新声明大标题：
.header { font-size: 1rem; padding: 0.5rem 0.75rem; background: #7F7CFF;}.header--large { font-size: 2rem; padding: 1rem 1.5rem;}
有没有注意到这里的模式？ .header--larger 的 font-size 是 header 的两倍大。因此， .header--large 的 padding 是 .header 的两倍大小。
如果我们有更多大小的标题，或者改变标题大小时，又会发生什么呢？你已经可以看到如果使用 rem 对整个网站进行编码所带来的重复性以及复杂性。
我们可以同时使用 rem 和 em 简化代码，这样就不需要对 .header-larger 的 padding 进行声明。
.header { font-size: 1rem; padding: 0.5em 0.75em; background: #7F7CFF;}.header--large { font-size: 2rem;} 正如你所看到的， 当有属性需要用它的字体大小( font-size )进行大小声明时，这时 em 就相当有用。 这就是第一条原则产生的地方。
接下来让我们看看，如何只使用 em 来创建相同的标题。
只使用 EMs 制作标题元素
只使用 em 来制作标头元素和只使用 rem 制作的代码差不多，只需要将 rem 该更为 em .
.header { font-size: 1em; padding: 0.5em 0.75em; background: #7F7CFF;}.header--large { font-size: 2em;} .header 和 .header--larger 的效果看起来和 rem 实现效果一样。
不是吗？
不是的！
你的网页只包含一个标题元素是极不可能的。我们必须考虑标题与页面其他元素的交互。
在标题之前或之后看见其他元素是十分正常的，如下图所示：
对于这个元素集的标记如下：
A Header Element
查看更多关于REMvsEM_html/css_WEB-ITnose的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did111153