第三十二章 单位续谈

em

Emmm……

em 是一个单位，就可以解决前面的问题。但这不是一个绝对的单位，所以没有办法单独说 em 是多大。它表示的是当前元素文字的大小是它父元素的多少倍。

p {font-size: 1.2em;}

如果数字大于 1，那就是比父元素的文字更大；反之，如果小于 1，那就是比父元素的文字更小。这是一个很简单的数学题。

这时候我们先要说一下，在默认的情况下，就是你没有进行字号的设置，子元素的文字大小是等于父元素的文字大小的，这叫做继承。当然你别拿 h1—h6 的标题来抬杠。

那么按照上面所说的这些规则，如果我们全用 em 单位，网页中所有文字的大小，就都和 body 元素的文字大小相关了。这时候我们只需要调整 body 的文字大小，网页中其他元素的文字都跟着发生相应的变化。如果 body 中设置文字大小依旧使用 em 单位，则是相对于浏览器默认文字大小的倍数。

诶？！这样好像就解决了上一章所遗留的问题。仿佛一切都变得十分美好了，所以这个单位真的流行了好长时间。

百分比

和 em 类似，只是换用百分比来表达。这个完全看个人喜好，就不再做解释了。

p {font-size: 120%;}

rem

em 看起来很美好，但还是有一个非常严重的缺点。假如说每个元素都对文字的大小有所调整，嵌套几层之后，你就很难一下子从这个单位上看出当前文字的大小了。

于是有了 rem。这也是一个相对尺寸，但是它不会出现上述的混乱，因为无论在描述哪一个元素，它表示的都是相对于根元素（body）文字大小的倍数关系。

p {font-size: 1.2rem;}

这样就不需要考虑父元素当前的字体大小是什么了，直接用 body 的字号乘以比例就可以得到这个元素的字号。而且，元素的字号依旧与根元素相关，可以很好的被浏览器进行调整。

---

这是我们比较常用的一些单位，其实各自有各自的优点和缺点，所以并没有绝对的好坏。根据实际情况的需要，选择合适的单位，才是最好的方法。

单纯的写文章，需要表达出标题的字号更大一些，可能我们会用绝对大小简单的表示一下；某些内容需要特别的强调突出，也许我们用相对大小去表示一下；为了适应某些元素的尺寸，我们用像素精确的进行控制；和父元素相关的调整，用 em；情况比较复杂的时候，用 rem 直接相对于根元素进行设置。

那么我们说了这么多，大家来动手试一试他们的效果吧~