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