px、rem、em、vw/vh
- px是固定的单位长度，一旦设置了就无法随页面的大小而适应改变。
- em是相对长度单位，比px更具灵活性，em的长度是相对于父元素
- rem的长度是相对于根元素，也就是html的字体大小，通常会设定一个参考值
- vw/vh是相对于当前视口的百分比例
px
网页上的1像素单位。 px相对于显示器屏幕分辨率而言的，不随终端设备的尺寸大小而改变；
通常用来作为边框和元素定位使用，不推荐使用自适应或响应式页面
rem
rem 是css3引入的一个新的单位，表示全部的长度都相对于根元素，根元素是<html>元素。通常做法是给html元素设置一个字体大小，然后其他元素设置rem都是以html的标准值为1单位来设置
em
子元素字体大小的em是相对于父元素字体大小
元素的width/height/padding/margin用em的话是相对于该元素的font-size
em/rem：用于做响应式页面，不过我更倾向于rem，因为em不同元素的参照物不一样（都是该元素父元素），所以在计算的时候不方便，相比之下rem就只有一个参照物（html元素），这样计算起来更清晰。
1、rem 和 em 单位是由浏览器基于你的设计中的字体大小计算得到的像素值。
2、em 单位基于使用他们的元素的字体大小。
3、rem 单位基于 html 元素的字体大小。
4、em 单位可能受任何继承的父元素字体大小影响
5、rem 单位可以从浏览器字体设置中继承字体大小。
6、使用 em 单位应根据组件的字体大小而不是根元素的字体大小。
7、在不需要使用em单位，并且需要根据浏览器的字体大小设置缩放的情况下使用rem。
8、使用rem单位，除非你确定你需要 em 单位，包括对字体大小。
9、媒体查询中使用 rem 单位
10、不要在多列布局中使用 em 或 rem -改用 %。
11、不要使用 em 或 rem，如果缩放会不可避免地导致要打破布局元素。
vw/vh
vw/vh是一个相对单位（类似于em,rem)
- vw：viewport width 视口宽度单位
- vh：viewport height 视口高度单位
相对视口的尺寸计算结果
- 1vw = 1/100视口宽度
- 1vh = 1/100视口高度
注意：和百分比是有区别的，百分比相对于父元素来说得，而vw和vh总是针对于视口来说的。
