vh、vw、vmin、vmax 知多少

介紹一些 CSS3 新增的單位，平時可能用的比較少，可是因爲單位的特性，在一些特殊場合會有妙用。

vw and vh
1vw 等於1/100的視口寬度 （Viewport Width）

1vh 等於1/100的視口高度 （Viewport Height）

綜上，一個頁面而言，它的視窗的高度就是 100vh，寬度就是 100vw 。看個例子：

CodePen Demo

---

響應式web設計離不開百分比。可是，CSS百分比並非全部的問題的最佳解決方案。CSS的寬度是相對於包含它的最近的父元素的寬度的。可是若是你就想用視口（viewpoint）的寬度或者高度，而不是父元素的，那該腫麼辦？ 這就是 vh 和 vw 單位爲咱們提供的。

1vh 等於1/100的視口高度。栗子：瀏覽器高度900px, 1 vh = 900px/100 = 9 px。同理，若是視口寬度爲750， 1vw = 750px/100 = 7.5 px。

能夠想象到的，他們有不少不少的用途。好比，咱們用很簡單的方法只用一行CSS代碼就實現同屏幕等高的框。

.slide {
height: 100vh;
}
假設你要來一個和屏幕同寬的標題，你只要設置這個標題的font-size的單位爲vw，那標題的字體大小就會自動根據瀏覽器的寬度進行縮放，以達到字體和viewport大小同步的效果。

---

vmin and vmax
vh和 vw 依據於視口的高度和寬度，相對的，vmin 和 vmax則關於視口高度和寬度二者的最小或者最大值

vmin — vmin的值是當前vw和vh中較小的值。
vmax — vw和vh中較大的值。
這個單位在橫豎屏的切換中，十分有用。

在一些 Demo 示例，或者大頁面中，咱們常常都會看到上述 4 個單位的身影。靈活使用，就能夠減小不少 CSS 的代碼量。

轉載於https://github.com/chokcoco/iCSS/issues/15