css3中vm和vh詳解,巧用vmin和vmax解決自適應寬高布局

在製作響應式網頁的時候一般會對百分比有很大的依賴，但是vm和vh，vmin和vmax這4個元素卻可以解決我們很多的煩惱。

01vw和vh詳解

vw：Viewport width，即容器（可以是div）的寬度，默認1vw=整個視窗寬度的1%，全屏為100vw。比如視窗寬度為1200px，1vw=120px=1200px*1%，如果是滿屏就則為100vw=1200px。

vh：Viewport height，即容器（如div）的高度，默認1vh=整個可視窗口高度的1%，全屏是100vh。

支持加減乘除運算和常用計算單位。

使用「+」、「-」、「*」 和 「/」四則運算；可以使用百分比、px、em、rem等單位；可以混合使用各種單位進行計算；表達式中有「+」和「-」時，其前後必須要有空格，如"widht: calc(10%+5em)"這種沒有空格的寫法是錯誤的；表達式中有「*」和「/」時，其前後可以沒有空格，但建議留有空格。

div{height: calc(100vh-100px);}這是將div的高度設置為視窗高度減去100px，支持max-width和min-width這樣的計算，calc運算為設計提供很大的方便，再也不用百分比了，做出來的效果更絢麗。

02vmin和vmax詳解

vmin：表示選擇視窗最小的那一個；vmax：選擇視窗最大的那一個；和vw與vh一樣支持calc的各種單位和運算符

vmin

如上圖所示，div {height:100vmin;width:100vmin;}，寬和高均選擇最小的那一個視窗，可以看到這是一個以手機屏幕的寬（最小）來設定div的寬高。

同樣的道理，如果需要選擇最大的那一個視窗作為寬或高，那麼就使用vmax即可，如下圖所示。

vmax

代碼為div {height:100vmax;width:100vmax;}，選擇設備視窗最大的那一個作為我們的寬或高，也支持calc運算。

使用vmin或vmax的好處是可以對各種不同屏幕設置相對寬高，這對於視覺效果很好，而且不會導致排版混亂，減少很多@media判斷屏幕寬度的代碼。例如下面的代碼

lytit{max-width: calc(100vw / 3) ！important;max-height: calc(100vw / 3) ！important;}

這個是我的一張圖片響應式代碼，最大寬度和高度都設置為視窗寬度的三分之一，對於從手機屏幕320到768px的屏幕上顯示很良好。

03需要注意的問題

vw（vh）或vmin（vmax）中默認的滿屏是100，即100vw、100vh、100vmin、100vmax。但是100並不是屏幕的實際寬度，而是所在的容器的寬度。

比如電腦屏幕寬度是1920px，網頁中的div寬度是1200px，此時100vw就是1200px而不是1920px；而高度100vh則指的是瀏覽器右側出現滾動條的可見高度部分，不包含瀏覽器地址欄、工具欄和底部的狀態欄哦。

自從學會了使用這幾個標籤，感覺依賴上了，很多響應式功能用它來實現，香噴噴。