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;
}
原文地址:https://www.cnblogs.com/zhu-shixin/p/6384396.html