px
也就是像素，是基于屏幕分辨率来说的，一旦设置了，就无法适应页面大小的变化。
em
em：是相对单位，相对于当前对象内文本的字体大小（也就是它的父元素），如果当前对象内文本的字体没有设置
大小，就会相对于浏览器默认字体大小也就是16px。所以在没有设置的情况下1em=16px。
为了便于运算你可以在body选择器中声明Font-size-62.5%;这就使em值变为16px*62.5%=10px,这样
12px=1.2em,10px=1em,也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。
rem
rem的出现是为了解决em的问题的，em是相对于父元素来说的，这就要求我们进行任何元素设置的时候，都需要知道它的父元素字体的大小。而rem是相对于根元素，这样就意味着，我们只需要在根元素确定一个参考值，
就可以了，同时还能做到只修改根元素就成比例地调整所有字体大小。
vh,vw
vh、vw是根据窗口的宽度。会把窗口的大小分为100份，所以50w代表窗口大小的一半。并且这个值是相对的，当窗口大小发生改变也会跟着改变，同理，则为窗口的高度
区别
px是固定的大小，em是相对于父元素字体的大小，rem是相对于根元素字体的大小，vh、w是相对可是窗口的大小
使用场景
- 一般我们在设置边框和边距的时候用px比较好
- 而在一些需要做响应式的页面用rem比较便捷
- 但是具体还是得看你的业务来定的