css3自适应单位vw,vh详解

在CSS3中，新增了很多长度单位，今天就来谈谈： vw、vh、vmin、vmax

1.什么是视口？
在客户端，视口指的是浏览器的可视区域；
而在移动端，它涉及3个视口：Layout Viewport（布局视口），Visual Viewport（视觉视口），Ideal Viewport（理想视口）。指的就是Layout Viewport, “视区”所指为浏览器内部的可视区域大小，即window.innerWidth/window.innerHeight大小，不包含任务栏标题栏以及底部工具栏的浏览器区域大小。

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

（1）vw、vh
vw是相对视口（viewport）的宽度而定的，1vh 等于1/100的视口高度，

假如浏览器的宽度为200px，那么1vw就等于2px（200px/100）。

vh是相对视口（viewport）的高度而定的，1vw 等于1/100的视口宽度。

假如浏览器的高度为500px，那么1vh就等于5px（500px/100）。

（2）vmin、vmax
vmin和vmax是相对于视口的高度和宽度两者之间的最小值或最大值。

如果浏览器的高为300px、宽为500px，那么1vmin就是3px，1vmax就是5px；如果浏览器的高为800px，宽为1080px，那么1vmin也是8px，1vmax也是10.8px。