这周在逆战班学习了弹性布局，网格布局，以及移动端布局和响应式布局等。其中在移动布局有两种方案，流式布局和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了。

在css中，vw是一种视窗单位，也是相对单位。相对于视口的宽度，视口被均分为100单位的vw。下面本篇文章就来给大家介绍一下，希望对大家有所帮助。
CSS 单位是一种量度单位，包括尺寸单位和颜色单位。我们常使用向对单位，不会使得网页在不同的视图下造成布局混乱的情况。
vw是Viewport's width的缩写形式，1vw永远等于当前视口宽度的百分之一。vw是一种视窗单位，也是相对单位。相对于视口的宽度，视口被均分为100单位的vw。
vw优势在于能够直接获取宽度，而用 % 在没有设置 body 宽度的情况下，是无法正确获得可视区域的宽度的，所以这是挺不错的优势。
这里的视口指的是浏览器可视区域，图示如下：
示例代码：h1{font-size:8vw;}
如果视口的宽度是200mm，那么上述代码中h1元素的字号将为16mm，即(8x200)/100
兼容性：
示例：
p{font-size:5vw;}
相对于viewport宽度大小的文字

  在解决居中问题的时候，看到一种写法：100vh 

  先要弄懂它是什么就先看看什么是视口

  在桌面端，视口指的是在桌面端，指的是浏览器的可视区域；而在移动端，它涉及3个视口：Layout Viewport（布局视口），Visual Viewport（视觉视口），Ideal Viewport（理想视口）。

  视口单位中的“视口”，桌面端指的是浏览器的可视区域；移动端指的就是Viewport中的Layout Viewport。

  根据CSS3规范，视口单位主要包括以下4个：

      1.vw：1vw等于视口宽度的1%。

      2.vh：1vh等于视口高度的1%。

      3.vmin：选取vw和vh中最小的那个。

      4.vmax：选取vw和vh中最大的那个。

   vh and vw：相对于视口的高度和宽度，而不是父元素的（CSS百分比是相对于包含它的最近的父元素的高度和宽度）。1vh 等于1/100的视口高度，1vw 等于1/100的视口宽度。

比如：浏览器高度950px，宽度为1920px, 1 vh = 950px/100 = 9.5 px，1vw = 1920px/100 =19.2 px。

vmax相对于视口的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax。

vmin相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin。

    min-height: 100vh;

    display: flex;

    justify-content: center;

    align-items: center;

    这样可以把一个元素设置在屏幕的正中间。

前端常用开发单位-vw
05-前端开发常用单位-vwvh
*{
margin: 0;
padding: 0;
}
/*div{*/
/*    width: 10vmin;*/
/*    height: 10vmax;*/
/*    background: red;*/
/*}*/
div{
width:1vw;
height: 1vh;
background: red;
}
/*
1.什么是vw(Viewport Width)和vh(Viewport Height)?
1.1vw和vh是前端开发中的一个动态单位, 是一个相对于网页视口的单位
1.2系统会将视口的宽度和高度分为100份,1vw就占用视口宽度的百分之一, 1vh就占用视口高度的百分之一
1.3vw和vh和百分比不同的是, 百分比永远都是以父元素作为参考
而vw和vh永远都是以视口作为参考
结论: vw/vh是一个动态的单位, 会随着视口大小的变化而变化(相对单位)
2.什么是vmin和vmax?
vmin: vw和vh中较小的那个
vmax: vw和vh中较大的那个
使用场景: 保证移动开发中屏幕旋转之后尺寸不变
* */
console.log(window.innerWidth, window.innerHeight);
let oDiv = document.querySelector("div");
console.log(getComputedStyle(oDiv).width);
console.log(getComputedStyle(oDiv).height);
效果: