像 px、em 這樣的長度單位大家肯定都很熟悉，前者為絕對單位，后者為相對單位。CSS3 又引入了新單位：vw、vh、vmin、vmax。下面對它們做個詳細介紹。
新單位也成為視窗單位，視窗(Viewport)單位已經有了好幾年了，但我們並沒有看到它被經常使用。它們現在正在被所有的主流瀏覽器所支持並提供獨特的功能使它在特定情況下非常有用，特別是那些涉及響應式的設計。
1.基本說明
| 長度單位 | 作用 | 特性 |
| px | 頁面按精確像素展示 | 絕對單位 |
| em | 基准點為父節點字體的大小 | 相對單位 |
| rem | 相對根節點Html字體大小來計算，常在移動端應用 | 相對單位 |
| % | 是相對於父元素的大小設定的比率 | 相對單位 |
| vw | 視窗寬度的百分比，（1vw 代表視窗的寬度為 1%） | 視窗單位 |
| vh | 視窗高度的百分比，(1vh代表視窗高度的1%) | 視窗單位 |
| vmin | 當前 vw 和 vh 中較小的一個值 | 視窗單位 |
| vmax | 當前 vw 和 vh 中較大的一個值 | 視窗單位 |
你可以在任何一個可以使用像素值的地方使用它們，比如width,height,margin,font-size等等。它們將通過窗口大小的調整或旋轉設備的瀏覽器來重新計算這些值。
tip：vw、vh、vmin、vmax 是一種視窗單位，也是相對單位。它相對的不是父節點或者頁面的根節點。而是由視窗（Viewport）大小來決定的，單位 1，代表類似於 1%。
視窗(Viewport)是你的瀏覽器實際顯示內容的區域—，換句話說是你的不包括工具欄和按鈕的網頁瀏覽器。
假如給頁面設置一個寬800px，則400px=50vh=50%。
2.vw、vh 與 % 百分比的區別
（1）% 是相對於父元素的大小設定的比率，vw、vh 是視窗大小決定的。
（2）vw、vh 優勢在於能夠直接獲取高度，而用 % 在沒有設置 body 高度的情況下，是無法正確獲得可視區域的高度的，所以這是挺不錯的優勢。
3.vmin、vmax 用處
做移動頁面開發時，如果使用 vw、wh 設置字體大小（比如 5vw），在豎屏和橫屏狀態下顯示的字體大小是不一樣的。
由於 vmin 和 vmax 是當前較小的 vw 和 vh 和當前較大的 vw 和 vh。這里就可以用到 vmin 和 vmax。使得文字大小在橫豎屏下保持一致。
4.瀏覽器兼容性
（1）桌面 PC
- Chrome：自 26 版起就完美支持（2013年2月）
- Firefox：自 19 版起就完美支持（2013年1月）
- Safari：自 6.1 版起就完美支持（2013年10月）
- Opera：自 15 版起就完美支持（2013年7月）
- IE：自 IE10 起（包括 Edge）到現在還只是部分支持（不支持 vmax，同時 vm 代替 vmin）
（2）移動設備
- Android：自 4.4 版起就完美支持（2013年12月）
- iOS：自 iOS8 版起就完美支持（2014年9月）