CSS 解惑 - rem 和 em

Question

css3 中新增单位 rem ，那么如何区分和何时使用 rem 和 em 呢？

一、定义

1、rem

相对于 document 根目录字体而言的相对单位，默认是相对于浏览器默认字体（16px）,即：1rem = 16px。

2、em

相当于使用它的容器的字体而言，如果使用者的字体定义单位也是 em ，那么就有继承关系。

如：

|-- div1（font-size:12px;）
    |-- div2（font-size:2em;padding:3em;）

div2 的 padding = 3 x 2 x 12px = 72px。

既然都是相对单位，那么在不考虑浏览器兼容的情况下，如何选择使用这 2 个单位呢？

二、使用

一般有 2 种情况可以考虑使用 em ，其余全部使用 rem 。

哪两种呢？

1. menu 中，下一级菜单依赖于上一级菜单的字体大小。比如：二级菜单字体比一级菜单小。
2. 按钮里面的图标，图标的大小跟文字的大小密切相关。

当然以上两种只是比较典型的代表，只要是有严重依赖相关元素尺寸的，使用 em 比较合理而已。

参考

如果大家看了以上文章，依然迷迷糊糊，说明你对这 2 个概念的基础只是掌握还不够，那么仔细阅读以下文章。

• 综合指南: 何时使用 Em 与 Rem
• 浅谈 viewport、响应式、自适应布局
• 移动开发屏幕适配分析