vw、vh、vmin、vmax 等css3单位的使用

1、需要提前明白的概念：视窗

先明白一个名词：视窗

     视窗(Viewport)是你的浏览器实际显示内容的区域，即不包括工具栏和任务栏的网页可视区域大小。

2、视窗单位：vw、vh、vmin、vmax

vw、vh、vmin、vmax 是一种视窗单位，也是相对单位。它相对的不是父节点或者页面的根节点。而是由视窗（Viewport）大小来决定的，值为数字n，表示占据视窗大小的n%。

3、vw、vh、vmin、vmax 具体描述

vw：视窗宽度的百分比（1vw 表示视窗宽度的 1%）

 

vh：视窗高度的百分比 （1vh 表示视窗高度的 1%）

 

vmin：当前 vw 和 vh 中较小的一个值

 

vmax：当前 vw 和 vh 中较大的一个值

4、vw举例说明

vw：视窗宽度的百分比（1vw 表示视窗宽度的 1%）

<style>

div {

border: 1px solid red;

}

</style>

<div style="width:20vw;"> hello</div>

<div style="width:50vw;"> hello</div>

<div style="width:100vw;"> hello</div>

5、vh举例说明

vh：视窗高度的百分比 （1vh 表示视窗高度的 1%）

<style>

div {

border: 1px solid red;

}

</style>

<div style="height:10vh;"> hello</div>

<div style="height:20vh;"> hello</div>

<div style="height:50vh;"> hello</div>

6、vh+vw混合使用说明

<style>

div {

border: 1px solid red;

}

</style>

<div style="height:10vh;width: 10vw;"> hello</div>

<div style="height:20vh;width: 20vw;"> hello</div>

<div style="height:50vh;width: 50vw;"> hello</div>

7、vmin与vmax举例说明

vmin：当前 vw 和 vh 中较小的一个值

vmax：当前 vw 和 vh 中较大的一个值

<div style="width:50vmin;"> hello</div>

<div style="width:50vmax;"> hello</div>

8、vw、vh 与 % 百分比的区别

（1）% 是相对于父元素的大小设定的比率，vw、vh 是视窗大小决定的。

 

（2）vw、vh 优势在于能够直接获取高度，而用 % 在没有设置 body 高度的情况下，是无法正确获得可视区域的高度的，所以这是挺不错的优势。