前端长度单位
| 单位(相对长度) | 含义 | 兼容性 | demo |
|---|---|---|---|
| em | 相对于父元素的字体大小（line-height中设置em是继承当前元素的font-size的倍数） | test-em-size | |
| rem | font size of the root element（相对于根元素html的大小的单位） |   ie9 和 ie10下面字体大小不支持rem，其他的支持 |
test-root-is-what |
| ex | font-size的x-height值，为小写字母x的高度，通常相当于font-size的一半，但是它的大小却与font-size和font-family有关 |  |
test-ex-em-diff |
| ch | width of the '0' |   |
test-ch-size |
| 单位(绝对长度) | 含义 |
|---|---|
| cm | 厘米 |
| mm | 毫米 |
| in | 英寸 |
| pt | 磅point，1/72英寸 |
| pc | pica，大约6pt，1/6英寸 |
| px | 屏幕的一个像素点 |
| 转换规则 | 1em == 16px == 0.17in == 12pt == 1pc == 4.2mm == 0.42cm |
| 单位(viewport) | 含义 | 兼容性 | demo |
|---|---|---|---|
| vw | 1% of viewport width |  |
test-v-size |
| vh | 1% of viewport height | ||
| vmin | min(1vw,1vh) |  ie9下使用vmin要写成vm |
|
| vmax | max(1vw,1vh) | ie10 / ie11不支持vmax |