vh and vw

響應式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的單位為vm,那標題的字體大小就會自動根據瀏覽器的寬度進行縮放,以達到字體和viewport大小同步的效果,有木有?!

這對單位多用于手機網站上。