vw和vh是视口(viewport units)单位,何谓视口,就是根据你浏览器窗口的大小的单位,不受显示器分辨率的影响,是不是很神奇,这就代表了,我们不需要顾虑到现在那么多不同电脑有关分辨率的自适应问题。
vw是可视窗口的宽度单位,和百分比有点一样,1vw = 可视窗口的宽度的百分之一。比如窗口宽度大小是1800px,那么1vw = 18px。和百分比不一样的是,vw始终相对于可视窗口的宽度,而百分比和其父元素的宽度有关。
vh就是可视窗口的高度了。
这边顺便提一下vmin和vmax,vmin是指选择vw和vh中最小的那个,而vmax是选择最大的那个
代码贴上(vw同理)// 假设浏览器高度900px,
// 1 vh = 900px/100 = 9px
// height: 100vh 与 height:100%的区别
height: 100vh://当元素没有内容时候,会撑开,与屏幕高度保持一致
height: 100%: //当元素没有内容时候,不会撑开
通过vw轻松实现bootstrap的栅栏布局.col-2 {
float: left;
width: 50vw;
}
.col-4 {
float: left;
width: 25vw;
}
.col-5 {
float: left;
width: 20vw;
}
.col-8 {
float: left;
width: 12.5vw;
}
本文为翻滚的胖子原创文章,转载无需和我联系,但请注明来自翻滚的胖子博客iskeys.com