理解web开发中的em单位和rem单位

** em ** 是CSS2引入的相对单位，作为字体大小使用时和百分比单位类似，都是相对于最近的父元素设置字体大小，为标签元素设置字体大小为100%和设置字体大小为1em是一样的效果，默认情况下浏览器的字体大小为16px，这样只要浏览器默认的字体大小不变，1em = 16px。

看下面的两个例子：

使用%单位表示字体大小

p.first，p.second元素的字体大小都是：80% x 100% x 16px = 12.8px。
p.third元素的字体大小是：200% x 80% x 100% x 16px = 25.6px。

为什么p.second元素和p.first元素的字体大小相同？

p.second元素的字体大小继承其直接父元素div.second，而div.second元素的字体大小又直接继承其直接父元素div.first，如果不设置div.second元素的字体大小，p.second元素的字体大小就和其直接父元素的兄弟节点p.first元素的字体大小一致，都继承自div.first，而div.first元素的字体大小又是相对于body元素的。如果设置body的font-size=18px，那么p.first，p.second的字体大小：80% x 18px = 14.4px；p.third的字体大小：200% x 80% x 18px = 28.8px。

使用em单位表示字体大小

p.first，p.second元素的字体大小都是：2em x 1em x 16px = 32px。
p.third元素的字体大小是：2em x 2em x 1em x 16px = 64px。

如果设置body的font-size=18px，那么p.first，p.second的字体大小：2em x 18px = 36px；p.third的字体大小：2em x 2em x 18px = 72px。

使用em的好处就是子元素的字体大小可以跟随父元素字体大小的改变而改变，当然没有十全十美的事情，这种好处在有些情况下也可能变成弊端，参见下面对rem的介绍。

既然em和%单位在字体大小上是类似的，那字体大小为啥用em单位的多，用%单位的少？书写方便？

em原本是活版印刷术中度量水平宽度的单位，最开始是取自字母M的宽度，但是这种方式不通用，因为不是每种字体中都有字符M，但是每种字体都可以有高度，所以后来em就以字体高度计算。在CSS中，em是一种通用的单位长度测量单位。印刷中，em是用来度量水平单位的；CSS中，em既可以度量水平单位，又可以度量垂直单位。更多关于em的只是参见官方介绍。

---

rem root em，CSS3新增的相对单位，相比于其他CSS3单位（ch，vw，vh，vmax，vmin）移动端兼容性强，android2.1+，iso4.1+。作用和em类似，唯一的区别就是em是相对父元素的，rem是相对html根节点的，即所有使用rem单位的子元素的字体大小都是相对根节点的。

p.first元素的字体大小是：2rem x 1rem x 16px = 32px。
p.second，p.third元素的字体大小都是：3rem x 1rem x 16px = 48px。

为什么p.second和p.third元素的字体大小相同？

p.second元素的字体大小继承自直接父元素div.second，div.second元素的字体大小用了rem单位表示，所以其字体大小直接相对于根元素html的字体大小，而p.third元素的字体大小继承自直接父元素div.third，div.third元素的字体大小也用了rem单位表示，所以它的字体大小也是相对于根元素html的字体大小的。如果设置html的font-size=18px，那么p.first元素的字体大小是： 2rem x 18px = 36px；p.second，p.third元素的字体大小是：3rem x 18px = 54px。

使用rem的好处：可以避免使用em带来的子元素字体大小逐层复合的连锁反应。