px em rem vw vh %的区别

px ：绝对单位，页面按像素计算，其值固定不变

em : 相对定位，相对于父节点的值来计算，缺点：相对于父节点的font-size（默认为16px）值来计算，出现层层嵌套问题，计算麻烦

rem：相对定位，相当于em的升级版，区别在于rem相对于根元素html来计算，不会出现em的层层嵌套问题，可以作为弹性布局，其浏览器兼容性也比较好；
缺点：
1.和根元素的font-size耦合性强，系统字体方法缩小时，会出现布局混乱的情况，
2，html头部需要插入一段js代码

vw vh：浏览器视窗大小（viewport）即：100vw = window.innerwidth 100vh = window.innerHeiht

%：百分比
vw 和 % 的区别：
1.%是根据父元素的宽高来计算的，而vw则是以viewport来计算
2.100vw包括了页面滚动条宽度（页面滚动条属于viewport范围内，100vw当然包括了页面滚动条宽度）。但把body或者html设置为width:100%时，是不包括页面滚动条的宽度的。也就是说100vw在有纵向滚动条的情况下，会比100%宽。 那么就会引发一个问题：pc端使用vw单位时，如果页面内容超出一屏长度，出现了纵向滚动条，同时有元素width:100vw， 则会导致出现条横向滚动条，因为元素（100vw + 滚动条宽度）超出了viewport宽度。（移动端滚动条不占位，所以 不会有这个问题）不过pc端一般不需要弹性布局，还是尽量使用width:100%更保险。

转：https://www.jianshu.com/p/868110b0c1c2