css3新單位vw、vh、vmin、vmax的使用詳解


1,vw、vh、vmin、vmax 的含義

(1)vwvhvminvmax 是一種視窗單位,也是相對單位。它相對的不是父節點或者頁麵的根節點。而是由視窗(Viewport)大小來決定的,單位 1,代表類似於 1%

視窗(Viewport)是你的瀏覽器實際顯示內容的區域—,換句話說是你的不包括工具欄和按鈕的網頁瀏覽器。

(2)具體描述如下:

  • vw:視窗寬度的百分比(1vw 代表視窗的寬度為 1%

  • vh:視窗高度的百分比

  • vmin:當前 vw 和 vh 中較小的一個值

  • vmax:當前 vw 和 vh 中較大的一個值

2,vw、vh 與 % 百分比的區別

(1)% 是相對於父元素的大小設定的比率,vwvh 是視窗大小決定的。

(2)vwvh 優勢在於能夠直接獲取高度,而用 在沒有設置 body 高度的情況下,是無法正確獲得可視區域的高度的,所以這是挺不錯的優勢。

3,vmin、vmax 用處

做移動頁麵開發時,如果使用 vwwh 設置字體大小(比如 5vw),在豎屏和橫屏狀態下顯示的字體大小是不一樣的。

由於 vmin 和 vmax 是當前較小的 vw 和 vh 和當前較大的 vw 和 vh。這裏就可以用到 vmin 和 vmax。使得文字大小在橫豎屏下保持一致。


上一篇 下一篇