viewport为视图窗口
vw：相对于viewport的宽度百分比；
vh：相对于viewport的高度百分比
vw、vh不会由于根元素、元素及父元素的大小改变，只与viewport有关
视口单位区别于%单位，视口单位是依赖于视口的尺寸，根据视口尺寸的百分比来定义的；而%单位则是依赖于元素的祖先元素。
例：
//css部分
html,*,body,div{
margin: 0;
padding: 0;
border: 0;
}
.one{
width: 100vw;
font-size: 5vw;
background-color: red;
margin: 0 auto;
}
.two{
width: 80vw;
font-size: 5vw;
background-color: orange;
margin: 0 auto;
}
.three{
width: 50vw;
font-size: 3vw;
background-color: cyan;
margin: 0 auto;
}
css设置one类元素宽为100%，文字为5%；two类元素宽为100%，文字为5%，three类元素宽为100%，文字为3%。
//html 部分
<div class="one">这是宽为100%，文字为5%的</div>
<div class="two">这是宽为80%，文字为5%的</div>
<div class="three">这是宽为50%，文字为3%的</div>
如图：
150484B3CBA1DAAB0FDEC3359F98D283.png
由one、two比较可以看出，文字的大小百分比与元素本身的宽没有关联。
