em

Emmm……

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

p {
  font-size: 1.2em;
}

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

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

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

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

百分比

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

p {
  font-size: 120%;
}

rem

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

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

p {
  font-size: 1.2rem;
}

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


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

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

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

【本章助记卡片:卡片 for 第三十二章