度量

元信息

目标：分清 CSS 度量的相对单位与绝对单位，掌握 px/%/em/rem 各自的参照物，会用 rem 把计算基点固定到根元素、避免 em 层层继承的复杂计算
关键概念：绝对单位、相对单位、px、em、rem、百分比
关联阶段：cp1
常见误区：以为 px 是与设备无关的绝对物理尺寸（实际大小取决于 PPI/DPI）；em 的参照物搞混——用于 font-size 时相对父元素字体大小，用于 padding 等属性时相对元素自身

相对单位与绝对单位

在 CSS 中，提供了许多种度量方式，主要分为两类：

绝对单位：绝对长度单位是一个固定的值，它反应一个真实的物理尺寸。绝对长度单位视输出介质而定，不依赖于环境（显示器、分辨率、操作系统等）。
相对单位：相对长度单位指定了一个长度相对于另一个长度的属性。对于不同的设备相对长度更适用。

px

像素，一般归类于绝对单位。它对应于屏幕上的一个点或针式打印机中的一个点。准确些讲，它并非是一个绝对单位，因为它的实际物理大小要取绝于PPI或DPI。

百分比

相对单位，%一般是相对于父元素的大小设定的比率值，也有例外，如：

对position:absolute;的元素是相对于已经定位的父元素，
对position：fixed；的元素是相对可视窗口

em

相对单位，它不是一个具体的数值，需要经过计算才能得出：

如果是应用于font-size属性，则相对于其父元素的字体大小而计算出来
其它情况，如padding等属性，则是相对于元素本身的字体大小

使用em的好处是，当浏览器改变默认的字体大小时，则整个网页中的字体大小均随之平滑缩放。坏处则是，对于深嵌多层的元素，其字体大小需要层层计算。

em 示例

以下盒子中的"hello"文本的字体大小是多少？

html

<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

度量 ​

元信息 ​

相对单位与绝对单位 ​

px ​

百分比 ​

em ​

em 示例 ​

如何使用em重构 ​

rem ​

参考 ​

深入阅读 ​

度量

元信息

相对单位与绝对单位

px

百分比

em

em 示例

如何使用em重构

rem

参考

深入阅读