【译】em和rem的使用

原文链接：http://filamentgroup.com/lab/on_ems_and_rems

在我们最近发表的文章中，《我们怎样学会放弃设置默认的font-size而拥抱em》，我们注意到有几个原因使得我们在css中停止对body的font-size进行设置。一些读者更愿意使用rem单位代替em，这样的话，他们就不会遇到我们之前发现的问题。我们承认，rem确实很不错，但是我们也应该认识到，rem和em并不是互相排斥的，它们都有着各自的使用目的。在同一个css的布局中，rem和em都是很有用的，这取决于你试图怎样去做。

也许rem最吸引人的地方在于，不管它们所在的元素处于哪种html文档的上下文环境中，它们总是和html的根元素的font-size的大小相关。话句话说，1rem的值总是不变的（默认的，一般是16px），rem的这种一致性使得它比em更容易使用，因为元素的em值跟其父元素的font-size值的设定有关。（如果你还是一个使用rem的新手，我们推荐你看一下《Jonathan Snook’s great article on the topic》）

rem能带来一些好处，但是rem在设计比例空白时并不会给我们带来更多的帮助，比如在使用padding、margin的流式布局的时候，而这这正是em闪光的地方。举个例子，一个块级元素包含一个标题和一个段落。我们经常通过调整文本的大小来使得标题和段落（以及它们和相邻内容的空白）间的空白看上去比较合理。我们通过改变font-size的值，使用em单位设定padding和margin，使得空白能按比例的自动适应font-size，而不用管它是什么元素。如果在同样的情形中，使用rem则需要手动调整。jsbin的例子简单的证明了两者使用上的差异，当设计复杂的网格布局的时候，这种差异将更加明显。

em为我们带来另外一个好处，当整个组件中的元素都使用em的时候，那么它们的大小都取决于包裹它们的容器元素的font-size的值。这个功能非常强大，尤其是在布局的不同部位使用同一个组件的时候，它可以让组件同时变大或变小。

与此同时，使用rem会有一个潜在的缺陷。如果你需要支持Internet Explorer 8和更老版本的浏览器，或任何版本的Opera Mini，那么你需要在每个使用rem的元素上都提供一个备用的px或基于em的值。这会让我们的工作变得有点困难，同时增加了用户下载的代码量（至少是如此）。

总而言之，rem是一门伟大而新兴的技术，在什么情况下使用它，这是我们现在依然在思考的问题。