Viewport單位
| 名稱 | 單位 | 描述 |
|---|---|---|
| Viewport Width | vw | 視窗(Viewport)寬度的1/100 |
| Viewport Height | vh | 視窗(Viewport)高度的1/100 |
| Minimum Viewport | vmin | 視窗(Viewport)較小的那個尺寸的1/100（高度或寬度） |
| Maximum Viewport | vmax | 視窗(Viewport)較大的那個尺寸的1/100（高度或寬度） |
Viewport的實際大小是依視窗大小改變，用於響應式佈局是非常好用的
在做響應式佈局(RWD)版面時，處理寬度時，使用%較為合適。
處理高度時，使用vh較為合適。
處理寬度時的元素：% > vw
瀏覽器是根據瀏覽器的窗口計算視窗大小，包括了瀏覽器的捲軸的空間。如果頁面延伸超過視窗的高度，捲軸就會出現，視窗的寬度將會大於html的寬度
viewport > html > body
處理高度時的元素：vh > %
用百分比定義的元素的大小是由它的父元素決定的，只有父元素也填滿整個屏幕的高度時才能擁有一個填滿整個屏幕的高度的元素。此時css只需做如下簡單設定：
.example { height: 100vh; }
如此不管.example如何嵌套，它還是能相對于視窗尺寸設置大小。
瀏覽器支持情況
ie9 支持vm，但不支持vmin
ie10-Edge，不支持vmax
本文轉載自 w3cplus