em rem px区别以及vw vh

em rem px区别

px是固定的像素，一旦设置了就无法因为适应页面大小而改变。

em和rem相对于px更具有灵活性，他们是相对长度单位，意思是长度不是定死了的，更适用于响应式布局。

em相对于父元素，rem相对于根元素。

em的特点：

1.子元素字体大小的em是相对于父元素字体大小。
2.子元素的width/height/padding/margin用em的话是相对于该父元素的font-size。

rem的特点：

rem是全部的长度都相对于根元素—html元素。通常做法是给html元素设置一个字体大小，然后其他元素的长度单位就为rem。

注意：

• 样式的reset中需先设置html字体的初始化大小为50px，这是为了防止js被禁用或者加载不到或者执行错误。
• 而做的兼容样式的reset中需先设置body字体的初始化大小为16px，这是为了让body内的字体大小不继承父级html元素的50px，而用系统默认的16px

vw vh

vw和vh相对于可视区域的宽和高

文章总结来自于：https://www.cnblogs.com/webdragon/p/11185979.html