CSS3視窗單位vw vh vmin vmax說明

vw、vh做為css3中的新單位，已經出來挺久的了，這裡也我個人也做一下詳細的總結。

vw、vh、vmin和vmax是css3中的新單位，是一種視窗單位，也是相對單位。它們的大小都是由視窗大小來決定的，單位1，代表類似於1%。具體描述如下：

vw：視窗寬度的百分比

vh：視窗高度的百分比

vmin：當前較小的vw和vh

vmax：當前較大的vw和vh

視窗，指的是瀏覽器可視區域的寬高，也就是window.innerwidth/window.innerheight。1vw就是1%的瀏覽器的寬度。100vw就是整個視窗的寬度。

如下圖：

vmin和vmax是當前較小的vw和vh和當前較大的vw和vh，看一下下面場景：

當設定字型為5vw時，豎屏和橫屏狀態下顯示的字型大小是不一樣的，為了保持一致，這裡就可以用到vmin和vmax來進行確認了。

%是相對于父元素的大小設定的比率，vw是視窗大小決定的。

其實這些視窗單位與%使用基本類似，優勢在於能夠直接獲取高度，而用%在沒有設定body高度的情況下，是無法正確獲得可視區域的高度的，所以這是挺不錯的優勢。

移動裝置上相容沒問題。

部落格名稱：王樂平部落格

CSS3視窗單位vw vh vmin vmax說明

vw vh做為css3中的新單位，已經出來挺久的了，這裡也我個人也做一下詳細的總結。vw vh vmin和vmax是css3中的新單位，是一種視窗單位，也是相對單位。它們的大小都是由視窗大小來決定的，單位1，代表類似於1 具體描述如下 vw 視窗寬度的百分比 vh 視窗高度的百分比 vmin 當前較...

CSS3視窗單位vw vh vmin vmax說明

原文出處 vw vh做為css3中的新單位，已經出來挺久的了，這裡也我個人也做一下詳細的總結。vw vh vmin和vmax是css3中的新單位，是一種視窗單位，也是相對單位。它們的大小都是由視窗大小來決定的，單位1，代表類似於1 具體描述如下 vw 視窗寬度的百分比 vh 視窗高度的百分比 vmi...

css中的視窗單位

視窗是瀏覽器實際顯示內容的區域 換句話說是你的不包括工具欄和按鈕的網頁瀏覽器。這些單位是vw,vh,vmin和vmax。它們都代表到了瀏覽器尺寸的比例和視窗的大小調整產生的規模改變。比如有乙個1000px 寬 和800px 高 的視窗 viewport 可以在任何乙個可以使用畫素值的地方使用它們，比...