我们在学习了rem后，知道他是相对单位，而且是相对于根元素HTML的字体大小来计算的；我们今天学习的vw/vh，也是相对单位，是相对于视口的尺寸来计算的。下面我们来看一下他们的个人简介，看看他们和rem有什么区别。
vw/vh简介
vw : 视口宽度（viewport width）
1vw = 1 / 100 视口宽度
vh : 视口高度（viewport height）
1vh = 1 / 100 视口高度
例如：设计稿iphone678宽度为375px，高度是667px。vw将屏幕宽度分为100等份，1vw就等于3.75px；vh将屏幕高度划分为100等份，1vh就等于6.67px。
vw/vh初体验
刚刚我们对vw/vh进行了一个简单的了解，知道了这是一个相对单位，并且是相对于视口的宽高来计算的。那么我们在实际开发过程中，应该如何确定设计稿对应的vw/vh尺寸呢？
那么确定设计稿对应的vw/vh尺寸分为三个步骤：
1、首先我们查看整个设计稿的宽度；
2、然后确定我们需要参考的设备宽度，也就是我们的视口宽度；
3、根据1 / 100的比例，确定vw/vh的尺寸。
好的，确定设计稿对应的vw/vh尺寸步骤我们已经知道了，那么我们接下来去写一下代码，体验体验vw/vh。
让我们来创建一个盒子，让他的宽高都为300px，按设计稿iphone678的视口大小来计算。那么我们应该给宽高设置为多少呢？
很简单，让宽度300 / vw(375的百分之一），得出结果80vw，那么高度也是80vw。
这是用vw,那么用vh呢，一样的。让高度300 / vh(667的百分之一)，得出结果约等于44.97vh，那么宽度也是44.97vh。
那么，我们可以看到，我们使用vw或者vh都不需要去做适配，因为它本身就已经是适配了，这也是我们说，为什么未来的适配方式会是vw/vw了。
好的，这时候有小伙伴要问了，我在使用vw/vh进行适配的时候，能不能混用？
接下来，我们一起实验一下，还是以上面的盒子为例。把我们的宽高分别用vw和vh来表示：
嗯~我们可以看到，在设计稿iphone678的视口大小下，我们将vw和vh混用，也可以实现盒子宽高为300px的情况。这是不是就意味着，我们在使用vw和vh进行适配时，可以混用呢？ 别着急，我们继续看
看到了吧？当我们将尺寸大小改为响应时，随意拖动他的宽，会发现，只有宽度在随着视口的大小而改变，我们的高度却固定了。 那么这是为什么呢？重点来了，快拿小本本记上！
在实际开发过程中，我们不会将vw和vh混用，是因为我们的vh是百分之一的视口高度，那么全面屏的视口高度尺寸比较大，如果vw和vh混用就可能导致盒子变形。小伙伴们，记住了吗？不能将vw和vh进行混用！不能将vw和vh进行混用！不能将vw和vh进行混用！（重要的事情说三遍！！！）
rem和vw/vh的区别
rem:在当前市场上比较常见，那么他在使用过程中，需要不断的去修改html的字体大小；需要使用到媒体查询；需要引入flexible.js文件；
vw/vh：未来市场要用到的，省去了各种判断和修改，不需要再另外做适配。
