vw和vw单位

这周在逆战班学习了弹性布局，网格布局，以及移动端布局和响应式布局等。其中在移动布局有两种方案，流式布局和rem布局，这里我讲的vw以及vw单位就是与rem布局息息相关的。
那么它们之间有什么关系，vw和vw单位究竟是什么呢？
rem布局是移动端布局的非常常见的一种方案，很多大网站也都采用了这种方案，它的好处就是这种布局方式做出的页面可以很好的适配各种型号的手机设备，在不同的分辨率下等比放大，始终给用户很协调的感觉。
这里展示下效果图：

（
这是在iphone6/7/8下面的效果。
再看下图：
（图2）
这是iPad下的效果。为了对比明显我并没有选择iPhone plus，我们可以在上方看到分辨率的对比，iPad的分辨率比iPhone6多出一倍多，但是界面依然很好的展示出来了，仔细观察四周的间隙并没有变，整体还是非常协调，与此同时我们也可以明显的看出此时屏幕所能显示内容变少了，这也就是他的缺点。那么rem布局究竟如何实现的呢？

1.rem

rem事实上就是一个相对单位，在之前我们学习过em这个单位，它就是相对于父元素或者当前元素的font-size值的，1em1个font-size的大小，而rem其实也是相对font-size的，不同的是它是相对根元素的font-size的，1rem1个根元素的font-size。利用rem的这个特性就可以实现rem布局了。
先给html的font-size设置一个固定值，通常设置100px就可以了，因为好计算，在网页中我们一般不要让字体## 标题大小小于12px，然后1rem就等于100px，这样转换下来rem页面就可以实现了。
这里展示下一个简单的案例：
首先还是照常写下html结构：

菜谱推荐

三餐推荐

食物库

精品好菜

金枪鱼的幻想曲

早餐的诱惑

进击的鸡小胸

主页
食谱 +
发现
我的

结构写完接着是css样式：
/* css reset */

*{margin: 0;padding: 0;}
img{display: block;}
a{text-decoration: none;}

/* css common */
html{font-size: 100px;}
body{font-size: 0.16rem;}

/* css header */
#header{height: 0.44rem;background: #02D1C5;}
#header span{font-size: 0.18rem;color: #FEFEFE;text-align: center;line-height: 0.44rem;display: block;}

/* css search */

#search{width: 2.5rem;height: 0.25rem;background: #F3F3F3;margin: 0.2rem 0.61rem 0.21rem 0.64rem;display: flex;}
#search input{width: 2.19rem;height: 100%;border: none;background: none;}
#search span{width: 0.17rem; margin-left: 0.1rem;margin-right: 0.04rem;display: block;margin-top: 0.02rem;}

/* css banner */

#banner{width: 100%;height: 1.5rem;}
#banner img{width: 100%;height: 100%;}

/* css nav */

#nav{width: 100%;height: 0.88rem;display: flex;justify-content: space-evenly;align-items: center;}
#nav a p{width: 1.65rem;height: 0.5rem; border-radius: 0.02rem;box-shadow: 0.02rem 0.02rem 0.1rem 0.02rem #cccccc;text-align: center;line-height: 0.5rem;color: #02D1C5;}
#nav a p span{font-size: 0.25rem;margin-right: 0.17rem;}

/* css main */

#main{margin-bottom: 0.7rem;}
#main h3{font-size: 0.16rem;color: #666666;margin-left: 0.49rem;margin-bottom: 0.1rem;}
#main div{width: 3.45rem;margin: 0 auto;}
#main div a{display: block;width: 3.45rem;height: 1.25rem;margin-bottom: 0.15rem;position: relative;}
#main div a img{width: 100%;height: 100%;}
#main div a div{width: 100%;height: 100%; position: absolute;left: 0;top: 0;background: rgba(83,83,83,.5);text-align: center;line-height: 1.25rem;font-size: 0.2rem;color: white;border-radius: 0.2rem;}

/* css footer */
#footer{width: 100%; height: 0.5rem;display: flex;justify-content: space-around;background: white;position: fixed;bottom: -0.01rem;}
#footer a {display: block;height: 100%;color: #666666;text-align: center;font-size: 0.14rem;}
#footer a span{font-size: 0.24rem;}
#footer a.active{color: #02D1C5;}
#footer a.footer-content{width: 0.5rem;height: 0.5rem;border-radius: 50%;background-color: #02D1C5;font-size: 0.22rem;color: white;line-height: 0.5rem;position: relative;bottom: 0.24rem;}

这个结构所有数据都是写在iPhone 6的分辨率基础上的，它的效果也成功地实现了，具体效果可以参考图1，但是要注意，这个时候如果我们切换了设备，那html的font-size是不会智能的切换的，rem也就没做到适配了。仅仅是这样我们是实现不了图2的效果的，不妨看下此时它在iPad下的效果：

（图3）
这个时候可以发现它和图2的效果差别是非常大的，那么rem怎么做到等比缩放呢，这里就要用到vw了。

2.vw

vw也是一个单位，并且也是一个相对单位：
vw -> view width 
vh -> view height
        相对单位：表示把屏幕自动分成了100vw宽和100vh高。
            vw / vh : 把屏幕分为100份，1vw等于屏幕宽的1%。
这里的100份，它是适用于各种分辨率下的，不管是宽375px的设备，还是414px的都是一样的效果。
假设屏幕是375px -> 100vw -> 1vw == 3.75px
假设屏幕是414px -> 100vw -> 1vw == 4.14px
	在实际操作中我们一般都会选择iphone6的设备，它的宽度就是375px的，于是我们可以进行一个简单的计算
1vw == 3.75px ? -> 多少个vw == 100px -> 26.666667vw -> 100px

所以fong-size：100px == font-size：26.666667vw
了解了vw的原理我们只需要对上述案例的代码进行小小的带动就可以了，如下所示：
html{font-size: 26.666667vw;}
这样无论任何设备下，就都可以自动运算转换进行适配了。

3.拓展

	在实际操作中计算也是很容易的，如果设置的数值因为种种需要不好计算，比如font-size:75px,那我们也可以用vscode中的插件px to rem   

（图4）
然后按上图设置一下，无论需要跟元素的font-size是多少，只需要改动px-per-rem的数值就可以了，比如我这里设置的就是100，然后回到代码页面选中需要改动的代码，按下快捷键alt+z就可以全部改成rem了。