(1)vw、vh、vmin、vmax 是一種視窗單位,也是相對單位。它相對的不是父節點或者頁麵的根節點。而是由視窗(Viewport)大小來決定的,單位 1,代表類似於 1%。
視窗(Viewport)是你的瀏覽器實際顯示內容的區域—,換句話說是你的不包括工具欄和按鈕的網頁瀏覽器。
(2)具體描述如下:
vw:視窗寬度的百分比(1vw 代表視窗的寬度為 1%)
vh:視窗高度的百分比
vmin:當前 vw 和 vh 中較小的一個值
vmax:當前 vw 和 vh 中較大的一個值
(1)% 是相對於父元素的大小設定的比率,vw、vh 是視窗大小決定的。
(2)vw、vh 優勢在於能夠直接獲取高度,而用 % 在沒有設置 body 高度的情況下,是無法正確獲得可視區域的高度的,所以這是挺不錯的優勢。
做移動頁麵開發時,如果使用 vw、wh 設置字體大小(比如 5vw),在豎屏和橫屏狀態下顯示的字體大小是不一樣的。
由於 vmin 和 vmax 是當前較小的 vw 和 vh 和當前較大的 vw 和 vh。這裏就可以用到 vmin 和 vmax。使得文字大小在橫豎屏下保持一致。