关于em和rem

原文链接：On ems and rems

或许rem最吸引人的地方在于，不管它用于html文档的哪个部分，它总是相对于文档的根元素（html）的字体大小(font-size)。换句话说，1rem总是相同的（默认通常情况下大约16px），这种一致性确实让我可以比较简单的使用rem,比较em是相对其元素的父元素的字体大小。

但rem的这种好处同时也意味着在设计百分比的空白比如在流失布局包围印刷的padding、margin时就不再那么有帮助了。而这正是em大放光彩的地方。举个例子，有一块内容包含标题和段落。为了视觉上的效果，标题和段落之间的空白会时常改变取决于文本的大小。在这种情况下使用em作为marin和padding的单位，空白会自动根据font-size等比例变化而不管font-size是多少。如果rem使用在同样的场景中，就要求手动调整rem。jsbin
上的这个例子简单的演示了这个不同点，但在复杂的网格布局会体现的更加明显（如果你不太了解rem,我们建议你去看一下Jonathan Snook's great article on the topic）。

em还有另外一个好处：当组件完全使用em设置时，它们根据包含元素的font-size一致地进行伸缩。这非常强大，特别是我们在布局的不同部分重用组件。

同时，rem还有一个潜在的问题。如果你想支持IE8及以前的的IE浏览器，或者Opara Mini的任何版本，在每一个使用rem的地方，你需要提供一个基于px或em的数字回退方案，这当然使我们的工作更难了，同时增加了传输到用户的代码的数量（虽然很少）。

总结一下，rem是一个很棒的正在兴起的技术。什么时候使用什么时候不应该使用，仍然是我们自己应该考虑的地方。