设置元素宽高为铺满屏幕的方式（巧妙使用单位vw和vh）

Posted 2020-12-22 belongs-to-qinghua

　　我们先作如下介绍：

　　什么是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;
}