移动适配的另一种方式—— vw / vh

前言  

        哦吼，之前我们对移动适配的其中一种方式（rem）进行了学习。当时在学习的时候我们有提到过另一种的适配方式。那么今天，我们就一起来对移动适配的另一种方式——vw/vh，进行学习。

---

        我们在学习了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和vw/vh之间的区别。

        rem:在当前市场上比较常见，那么他在使用过程中，需要不断的去修改html的字体大小；需要使用到媒体查询；需要引入flexible.js文件；

        vw/vh：未来市场要用到的，省去了各种判断和修改，不需要再另外做适配。

---

结束语

        好的，小伙伴们，今天我们的学习到这里就结束了，希望我给大家分享的内容会给大家有一些帮助。当然分享的再有用，只看不练也学不会，所以在之后我们应该去不断的练习，将这些内容变成我们今后吃饭的工具！

        加油！！！奥里给！！！