码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2020-05-27 12:13:12      阅读:140      评论:0      收藏:0      [点我收藏+]

标签:class   单位   pre   min   变化   height   网页   相对   bsp   

  我们先作如下介绍:

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

  

 

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

标签:class   单位   pre   min   变化   height   网页   相对   bsp   

原文地址:https://www.cnblogs.com/belongs-to-qinghua/p/12971472.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!