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; }