1. px
px 是 pixel 的意思 (像素). 图像是由一个个像素组成的, 每个点是一个像素. 比如 1922*1080 表示横向 1922 个像素点, 纵向 1080 个像素点
2. em
主要用于 font-size, 参考最近的父元素的 font-size.1em = 1 倍的父元素的 font-size.
所以在一个网页中会出现 1em 代表的大小不一样的情况.
3. rem
与 em 不同的地方是: rem 参照的是 html 元素的 font-size. 不会 1rem 大小不一样. CSS3 新增.
网页默认的字体大小是 16px. 默认 1rem = 16px
4. vh
vh 是 viewport height 的缩写, CSS3 新增的, 参照视口高度, 1vh = 1% 的视口高度
5. vw
vw 是 viewport width 的缩写, 参照视口宽度, 1vw = 1% 的视口宽度
vh 和 vw 可以用在元素大小随视口变化上. 一般用于长度单位
6. %
百分用到的地方很广泛, 比如长度, 字号 (相对于最近的父元素的字号), 位移等
7. vm
vm 相对于宽高中较小的那个, 1vm = 1% 较小的宽高
来源: http://www.jianshu.com/p/30cba323b142