完美的响应式布局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">
1
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设置最大最小宽度。但要注意浏览器的兼容性问题！

版权声明：本文为CSDN博主「seven豆」的原创文章