設置元素寬高為鋪滿屏幕的方式（巧妙使用單位vw和vh）

　　我們先作如下介紹：

　　什么是vw（viewport weight）和vh（viewport height）？

• vm和vh是前端開發中的兩個動態單位，是相對於網頁視口的單位；
• 1vm，1vh和百分比不同的是，vm和vh永遠都是以視口作為參考，而百分比永遠是以父元素作為參考；
• 系統會將視口的寬度和告訴分為100份，1vm就占視口寬度的百分之一，1vh就占視口高度的百分之一；

　　總結：vm和vh是兩個動態單位，會隨着視口大小的變化而變化。

 

　　什么是vmin和vmax？

• vmin：vw和wh中較小的一個；
• vmax：vw和vh中較大的一個；

　　常見使用場景：保證移動端開發中屏幕旋轉之后尺寸不變。

 

　　下面就利用上面介紹的單位實現元素鋪滿全屏：

• html

<div class="father-box"><div>

• css

.father-box {
    width: 100vw;
    height: 100vh;
    // min-height: 100vh;
}