用rem设置文字大小

一、px与em

用px设置文字大小是再正常不过的事情，比如

html {font-size: 12px;}

随处可见的在设置width、height使用px，这也是细致稳妥的设置方法，这样做的缺点在于调整浏览器的文字大小并未影响以px为单位的文本，这对一部分用户造成了不便。

用em设置文字大小弥补了这个问题，em是一个相对单位。文字大小用em表示的情况下，可以随着浏览器字号（比如在chrome下“设置->高级设置->字号”）的变大（变小）而变大（变小），使用格式与px基本一样，比如

p {font-size: 1em;}

以上面这个p元素为例，em的计算方式是这样的：

1. 若p的父元素设置了文字大小，如font-size:20px，则1em=20px；
2. 若父元素没有设置文字大小，则继续寻找上层节点的文字大小，直到根节点html；
3. 若根节点html没有设置文字大小，则取浏览器默认文字大小16px。

使用em有一个令人头疼的地方：

假设的文档结构是这样的：html>p>span，样式是这样的：

html {
    font-size: 62.5%;/* 10px÷16px=62.5% */
}
p {
font-size: 1.4em;/* 14px */
}

现在我想设置span的文字大小为12px，我需要计算12/14=85.7%

span {
    font-size: 0.857em/* 12px/14px=85.7% */
}

若还要设置span里面子节点的文字大小，计算会越来越痛苦。。。

这就是该rem出现的时候了。

二、rem

在CSS3中引入了rem，rem是指根元素（root element，html）的文字大小，IE9+与Firefox、Chrome、Safari、Opera等主流版本都支持。

设置过根节点的文字大小后，所有子节点的文字大小全部相对于根节点计算。比如html为10px，则1.2rem=12px，2rem=20px...以此类推。

html {
    font-size: 62.5%;/* 10px÷16px=62.5% */
}
p {
    font-size: 14px;
    font-size: 1.4rem;
}
span {
    font-size: 12px;
    font-size: 1.2rem;
}

为了兼容不支持rem的浏览器，要在设置rem的前面写上对应的px值，实现优雅降级。

使用rem的好处是：它具有em的相对特性（相对浏览器），又不会像em一样难以计算和控制。