像素（pixel）
在前端开发视口的水平方向垂直方向都是由很多小格子组成，一个小格子就是一个像素
特点：不会随着窗口大小的变化而变化，像素是一个固定的单位（绝对单位）
百分比（%）
是前端开发中的一个动态单位，永远是以当前元素的父元素作为参考进行计算
特点：
1.子元素的宽度是以父元素的宽度作为参考计算
2.子元素的高度是以父元素的高度作为参考计算
3.子元素的padding是以父元素的宽度作为参考计算
4.子元素的margin是以父元素的宽度作为参考计算
5.border宽度不能用百分比来设置
百分比是一个动态的单位，它会随着父元素的宽高变化而变化（相对单位）
em
是一个动态单位，相对于元素字体大小的单位。例如：font-size: 12px，那么1em就是12px
特点：
1.当前元素设置了字体大小，那么就相对于当前元素的字体大小
2.当前元素没有设置字体大小，那么就相对于第一个设置字体大小的祖先元素的字体大小
3.当前元素和所有祖先元素都没有设置字体大小，那么就相对于浏览器默认字体大小
是一个动态的单位，会随着参考字体大小的变化而变化（相对单位）
rem（root em）
是一个动态单位，永远相对于根元素的字体大小的单位
特点：
1.html元素设置了字体大小，那么就相对于html元素设置的字体大小
2.html元素没有设置字体大小，那么就相对于浏览器默认字体大小
vw（viewport width）和vh（viewport height）
是一个动态单位，是一个相对于网页视口的单位
特点：
系统会将视口划分为100份，1vw就占用视口宽度的百分之一，1vh就占用视口高度的百分之一
永远都是以视口作为参考
是一个动态的单位，会随着视口变化而变化（相对单位）
px vw rem之间的换算
1.我们假设pad的设计稿是以1920px为标准的。那么：
100vw = 1920px
1vw = 19.2px
我们想要： 1rem = 100px（这样方便我们在写代码的时候换算）
那么:
100px = 100vw / 19.2 = 1rem
所以：
1rem = 5.208vw。
这时候，我们只要给html的根元素设置：
font-size: 5.208vw即可。
2.同理的，手机端我们假设设计稿是以750px为标准的，那么:
100vw = 750px
1vw = 7.5px
我们想要： 1rem = 100px
那么：
100px = 100vw / 7.5 = 1rem
那么：
1rem = 13.33vw
