vw / vh 基本使用
vw 是相对单位，相对于 视口的尺寸 计算结果。
vw（viewport width） 是视口宽度：1 vw = 1/100 视口宽度
vh（viewport height） 是视口高度：1 vh = 1/100 视口高度
在 逻辑分辨率（即电脑缩放比100%）为 100% 的情况下计算：
<style>
.one{
width: 30vw;
height: 25vh;
background-color: aqua;
}
</style>
<body>
<div class="one"></div>
</body>
适配原理
vw / vh 能实现在不同宽度的设备中，网页元素尺寸的等比缩放效果。
先要查看设计稿的宽度，然后确定参考的设备宽度（就是视口宽度），最后确定 vw 尺寸（1/100视口宽度），vw 单位的尺寸 = px 单位的数值 / （1/100视口宽度） ，如下例：
参考设备的视口宽度：
参考设备的视口高度：
注意：
开发中，vw / vh 不要混用，如果混用可能会导致盒子变形，只用其中一个就可以了。
rem 和 vw / vh 的区别：rem 需要不断地修改 html 文字的大小，还要媒体查询 media ，及 flexible.js；vw / vh 能省去各种判断和修改。
