00x0 写在前面
CSS中有很多长度单位，本文主要对CSS常见的长度单位进行总结。主要分为两类，一类是相对长度单位：px/em/rem/vm/vh/%/百分号/ex/ch；另一类是pt/in/cm/mm/q。
00x1 相对长度单位
1.1 px
px（pixel）指像素。像素px是相对于显示器屏幕分辨率而言的，是屏幕上显示数据的最基本的点。点可大可小，点小画面更清晰，“分辨率高”；反之，就是分辨率高，所以是相对长度单位。
px = 1/dpi(英寸)
1.2 em
em，最初指字母M的宽度，是一个相对长度单位。相对于其父元素的font-size。假设其父元素设置font-size为16px，那1em = 16px；0.5em = 8px。
1.3 rem
rem，CSS3引入了rem，是一个相对长度单位，指相对于根元素的font-size。
默认情况下，html元素的font-size为12px。主要用于移动端适配。
优点：
- rem单位是根据根元素font-size决定大小，只要改变font-size的值，以rem为固定单位的元素大小也会发生响应式的改变
缺点：
- 必须通过一段js代码控制font-size的大小
- 控制font-size的js代码必须放在在页面第一次加载完成之前，并且放在引入的css样式代码之前。
1.4 视区相对单位
CSS3中还引入了vm，vh视区相对单位，vw表示相对于视口的宽度，vh表示相对于视口高度。“视区”指浏览器上的可视区域大小，即用户能看到的页面区域。视口宽度为100vm占满整个视口区域，那么1vw就相当于占整个视口宽度的1%。也能够用于移动端适配。
优点：
- 指定vw\vh相对与视口的宽高，由px换算单位成vw单位比较简单
- 通过postcss-px-to-viewport插件进行单位转换比较方便
缺点：
直接进行单位换算时百分比可能出现小数,计算不方便
兼容性- 大多数浏览器都支持、ie11不支持 少数低版本手机系统 ios8、android4.4以下不支持
1.5 %
%也是一个相对单位，但是各元素的属性的百分比都是根据不同的属性的来设置的。也可以用来进行移动端适配
子元素width、height的百分比是相对于子元素的直接父元素设定的
margin和padding的百分比，无论是垂直方向上的还是水平方向上的，都是相对于直接父元素的width。
border-radius的百分比是相对于自身宽度，与父元素无关。
优点：
- 宽度自适应，在不同的分辨率下都能达到适配
缺点：
- 百分比的值不好计算
- 需要确定父级的大小，因为要根据父级的大小进行计算
- 各个属性中如果使用百分比，相对父元素的属性并不是唯一的
- 高度不好设置，一般需要固定高度
1.6 ex
ex也是相对长度单位。相对于字符“x”的高度，通常为给定字体的“x”的高度（也被称为基线高度）。当无法确定”x”的高度时，取一个em的一半。ex在实际中常用于微调
1.7 ch
ch与ex类似，被定义为数字0的宽度。当无法确定数字0宽度时，取em值的一半作为ch值。ch在实际中主要用于盲文排版。
00x2 绝对长度高度
2.1 pt
p（point）等于1/71英寸，是一个物理长度单位。
pt = 1/72(英寸)，pt = px * dpi / 72。
dpi指分辨率，指每英寸包含点的数量。
2.2 in
in（英寸），绝对单位。
2.3 cm/mm/q
这三者都是绝对单位，cm指厘米，mm指毫米，q指1/4毫米。