度量
相对单位与绝对单位
在 CSS 中，提供了许多种度量方式，主要分为两类：
- 绝对单位： 绝对长度单位是一个固定的值，它反应一个真实的物理尺寸。绝对长度单位视输出介质而定，不依赖于环境（显示器、分辨率、操作系统等）。
- 相对单位： 相对长度单位指定了一个长度相对于另一个长度的属性。对于不同的设备相对长度更适用。
px
像素，一般归类于绝对单位。它对应于屏幕上的一个点或针式打印机中的一个点。准确些讲，它并非是一个绝对单位，因为它的实际物理大小要取绝于PPI或DPI。
百分比
相对单位，以%百分比的方式指示长宽，参考的基准一般是父元素
em
相对单位，它不是一个具体的数值，需要经过计算才能得出：
- 如果是应用于
font-size属性，则相对于其父元素的字体大小而计算出来 - 其它情况，如
padding等属性，则是相对于元素本身的字体大小
使用em的好处是，当浏览器改变默认的字体大小时，则整个网页中的字体大小均随之平滑缩放。坏处则是，对于深嵌多层的元素，其字体大小需要层层计算。
em 示例
以下盒子中的"hello"文本的字体大小是多少？
<div class="level-1">
<div class="level-2">
<div class="level-3">
<p>Hello!</p>
</div>
</div>
</div>
html { font-size: 20px; }
.level-1, .level-2 { font-size: 0.5em; }
.level-3 { font-size: 2em; }
如何使用em重构
- 各个主流浏览器的默认字体高都是16px，即1em
- 在body选择器或元素中声明样式
font-size: 62.5%;，即10px - 将原来的px数值除以body的基数，即10，然后换算为em作为单位；
- 注意嵌套较深的元素的设置，应只在最顶层的祖先元素上设置
font-size属性，而避免其它父元素上进行重复声明，这样会导致计算过于复杂。
如果计算麻烦，可使用px与em的单位转换工具 http://pxtoem.com/
在IE浏览器中，存在关于汉字显示的bug：由以上方法得到的12px(1.2em)的汉字在IE中并不等于直接用12px定义的字体大小，而是稍大一点。需要在body选择器中把62.5%换成63%就能正常显示了。原因可能是IE处理汉字时，对于浮点的取值精确度有限。本现象只发生在12px的汉字，英文不存在此现象。
rem
由于em的层层继承的特性，当元素嵌套过深时，常常会出现计算复杂的问题，如果能够将计算的基点仅限于根元素的字体大小，是不是能够更方便呢？
为了适应这种情况，在 CSS3 中新增了rem这一相对单位，与em的区别即: 它总是以根元素<html>的字体大小为基数。
参考
深入阅读
- viewport的深入理解 https://www.cnblogs.com/2050/p/3877280.html
- 反方意见：不推荐使用em/rem的理由 http://www.w3cplus.com/css/r-i-p-rem-viva-css-reference-pixel.html