首页 > Web开发 > 详细

vw vh vm CSS长度单位

时间:2017-02-09 23:48:48      阅读:347      评论:0      收藏:0      [点我收藏+]

vw  相对于视口的宽度。视口被均分为100单位的vw(即浏览器可视区) 100vw = 可视区宽度

vh  相对于视口的高度。视口被均分为100单位的vh(即浏览器可视区) 100vh  = 可视区高度

vmin/vm 相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin(即vm)

 

参考:

视区相关单位vw, vh..简介以及可实际应用场景

结论:vw, vh视区大小相关单位只适用于非定位元素的高度相关属性上! //zxx: 高度相关属性如 – height/min-height/max-height/line-height/padding-top/padding-bottom等

很重要的运用场景是:

1.手机适应屏幕尺寸时,如需订列表缩略图的宽高时,如(1:1)且可自适应,

.img-wrap{
width: 30vw;
height: 30vw;
}

2.活动页,分享等单页面

body{
height:100vh;
}

 

vw vh vm CSS长度单位

原文:http://www.cnblogs.com/zhu-shixin/p/6384396.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!