完美的响应式布局vw+vh+rem视口布局

VM和VH是什么？

vw和vh是视口（viewport units）单位，
何谓视口，就是根据你浏览器窗口的大小的单位，不受显示器分辨率的影响，是不是很神奇，这就代表了，我们不需要顾虑到现在那么多不同电脑有关分辨率的自适应问题。

vw是可视窗口的宽度单位，和百分比有点一样，1vw = 可视窗口的宽度的百分之一。比如窗口宽度大小是1800px，那么1vw = 18px。和百分比不一样的是，vw始终相对于可视窗口的宽度，而百分比和其父元素的宽度有关。
vh就是可视窗口的高度了。
vmin和vmax，vmin是指选择vw和vh中最小的那个，而vmax是选择最大的那个

VM、VH 与rem的使用

1、页面布局

宽度和高度全部自动适应！再加上rem布局的字体适应，可以完美解决各种屏幕适配问题！ 故这个meta元素的视口必须声明。

 <meta name="viewport" content="width=device-width,initial-scale=1.0">

2、响应垂直居中

可以使用vw，vh来实现在页面中响应垂直居中，只需要以下代码

#box { 
  width: 50vw; 
  height: 50vh; 
  margin: 25vh auto; 
}

只要设置margin的上下间距，使之heigit + margin-top +margin-bottom = 100 ，width + margin-left + margin-right = 100 ，就能够响应垂直居中

3、模仿bootstrap的栅栏布局

bootstrap的栅栏布局，用vw，vh能够轻松实现。

.col-2 { 
  float: left; 
  width: 50vw; 
} 
.col-4 { 
  float: left; 
  width: 25vw; 
} 
.col-5 { 
  float: left; 
  width: 20vw; 
} 
.col-8 { 
  float: left; 
  width: 12.5vw; 
}

上面是column实例只要在一行中所有的列加起来等于100vw就实现响应式布局

4、rem布局-解决字体适配（此布局在weex中无法识别）

rem布局原理：根据CSS的媒体查询功能，更改html根字体大小，实现字体大小随屏幕尺寸变化。

  @media only screen and (max-width: 1600px) and (min-width: 1280px){
    html{
      font-size: 14px;
    }
  }
  @media only screen and (max-width: 1280px) and (min-width: 960px){
    html{
      font-size: 12px;
    }
  }
  @media only screen and (max-width: 960px){
    html{
      font-size: 10px;
    }
  }

5、vw、vh、rem的使用

<template>
    <div class="box">
        
    </div>
</template>
<style>
    .box{
        width:50vw;
        height: 20vh;
        line-height: 20vh;
        font-size: 1.5rem;
        margin:0 auto;
        font-weight: bold;
        background-color: rgba(255,255,255,0.8);
    }
</style>

上面代码中的50vw代表了 此div占据视口宽度的50%、高度占据视口高度的20%，并且会随着视口的变化，进行自适应;

字体则是1.5倍的html根字体大小。并且根据媒体查询进行字号变化。

总结：使用vw+vh+rem的布局是个不错的选择，因为视口单位有个缺点就是它没有最小或者最大限制，这就达不到我们都时候所希望的一个限制（比如窗口太小了，字都看不清）。所以我们可以在根元素上设置vw和vh，然后在根元素上限制最大最小值，然后配合body设置最大最小宽度。但要注意浏览器的兼容性问题！