CSS3新单位vw，vh，vmin，vmax详解

1，vw，vh，vmin，vmax是由视窗Viewport大小来决定的，单位1，代表1%，是一种相对单位，只要是为响应式适配视窗的一种解决方案；

vw：view width（视窗宽度）的百分比，1vw代表视窗宽度的1%；

vh：view height（视窗高度）的百分比，1vh代表视窗高度的1%；

vmin：当前视窗宽度vw和视窗高度vh中较小的一个值；

vmax：当前视窗宽度vw和视窗高度vh中较大的一个值；

2，与百分比的区别：

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

（2）vw，vh优势在于能够直接获取高度，而%则在没有设定body的高度情况下，是无法正确获取可视区域的高度的，所以css3加入新单位是方便开发者的选择。

3，vmin，vmax的用处：

做移动页面开发时，如果使用vw，vh设置字体大小（例如10vw），在竖屏和横屏状态下显示字体大小是不一致的，而vmin，vmax是当前vw和vh中，较小值和较大值，这里就可以使用vmin和vmax，使得文字在横竖屏下面显示一致。

4，浏览器兼容性：

5，应用：

比如，弹出框大小随内容自适应；显示大图石限制其最大尺寸；实现Word文档页面效果（使用vh单位，一屏正好一页，改变浏览器窗口大小，页面大小随之变化）等。

 

【完】

新年flag2——每天走8000步，一个月走8000*30=24W步，一万步大约7KM，那么24*7=168公里，小米手环/手机打卡。