rem之前常用的两种计量单位
px：优点是方便、稳定、精确、一致；缺点是改变了浏览器的字体大小，页面布局会被打破
em：可以解决在浏览器中放大或缩放浏览页面时，布局被打破的问题。但是由于em是一个相对于父元素的相对值，下面代码li标签的font-size是不确定的。
（ 1 ÷ 父元素的font-size × 需要转换的像素值 = em值 ——> 需要转换的像素值 ÷ 父元素的font-size = em值 ）
body {
font-size: 62.5%; /*10 ÷ 16 × 100% = 62.5%*/
}
h1 {
font-size: 2.4em; /*2.4em × 10 = 24px */
}
p {
font-size: 1.4em; /*1.4em × 10 = 14px */
}
li {
font-size: 1.4em; /*1.4 × ? = 14px ? */
}
rem
在W3C官网上是这样描述rem的：font size of the root element。
也就是说，rem是指根元素（root element，html）的字体大小。
令人高兴的是：从遥远的 IE6 到版本帝 Chrome 他们都约好了，根元素默认的 font-size 都是 16px
如何使用rem
先来看一下这张表：
示例代码：
html{
font-size:62.5%; /* 10÷16=62.5% */
}
body{
font-size:12px;
font-size:1.2rem ; /* 12÷10=1.2 */
}
p{
font-size:14px;
font-size:1.4rem;
}
rem浏览器兼容性
IE9+，Firefox、Chrome、Safari、Opera 的主流版本都支持
