vh和vw

響應式網頁設計技術很大程度上依賴於比例規則。然而，CSS比例不總是每個問題的最佳解決方案。CSS寬度是相對於最近的包含父元素。如果你想使用顯示視窗的寬度或高度而不是父元素的寬度將會怎麼樣？這正是vh和vw單位所提供的。

vh等於viewport高度的1/100.例如，如果瀏覽器的高是900px,1vh求得的值為9px。同理，如果顯示視窗寬度為750px,1vw求得的值為7.5px。

這些規則表面上看起來有無盡的用途。例如，做一個佔滿高度的或者接近佔滿高度的幻燈片，可以用一個非常簡單的方法實現，只要用一行CSS：

.slide {
    height: 100vh;
}

div{
    height
 
:50vh;    /*佔高度的一半*/
width: 50vw;    /*佔寬度的一半*/
background: orange;
}