哦吼，之前我们对移动适配的其中一种方式（rem）进行了学习。当时在学习的时候我们有提到过另一种的适配方式。那么今天，我们就一起来对移动适配的另一种方式——vw/vh，进行学习。
我们在学习了rem后，知道他是相对单位，而且是相对于根元素HTML的字体大小来计算的；我们今天学习的vw/vh，也是相对单位，是相对于视口的尺寸来计算的。下面我们来看一下他们的个人简介，看看他们和rem有什么区别。
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尺寸分为三个步骤：
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之间的区别。
好的，小伙伴们，今天我们的学习到这里就结束了，希望我给大家分享的内容会给大家有一些帮助。当然分享的再有用，只看不练也学不会，所以在之后我们应该去不断的练习，将这些内容变成我们今后吃饭的工具！
加油！！！奥里给！！！
