vw vh vm CSS长度单位

vw  相对于视口的宽度。视口被均分为100单位的vw(即浏览器可视区) 100vw = 可视区宽度

vh  相对于视口的高度。视口被均分为100单位的vh(即浏览器可视区) 100vh  = 可视区高度

vmin/vm 相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin（即vm）

 

参考：

视区相关单位vw, vh..简介以及可实际应用场景

结论：vw, vh视区大小相关单位只适用于非定位元素的高度相关属性上！ //zxx: 高度相关属性如 – height/min-height/max-height/line-height/padding-top/padding-bottom等

很重要的运用场景是：

1.手机适应屏幕尺寸时，如需订列表缩略图的宽高时，如（1:1）且可自适应，

.img-wrap{
width: 30vw;
height: 30vw;
}

2.活动页，分享等单页面

body{
height:100vh;
}