一、px与em
用px设置文字大小是再正常不过的事情，比如
html {font-size: 12px;}随处可见的在设置width、height使用px，这也是细致稳妥的设置方法，这样做的缺点在于调整浏览器的文字大小并未影响以px为单位的文本，这对一部分用户造成了不便。
用em设置文字大小弥补了这个问题，em是一个相对单位。文字大小用em表示的情况下，可以随着浏览器字号（比如在chrome下“设置->高级设置->字号”）的变大（变小）而变大（变小），使用格式与px基本一样，比如
p {font-size: 1em;}以上面这个p元素为例，em的计算方式是这样的：
- 若p的父元素设置了文字大小，如font-size:20px，则1em=20px；
- 若父元素没有设置文字大小，则继续寻找上层节点的文字大小，直到根节点html；
- 若根节点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一样难以计算和控制。