css3的vw单位,vh单位的讲解,以及vw vh的兼容性
2017-01-09 23:40

vw vh的介绍

 vw,vh是css3中给我们提供的新的单位,他们是相对于viewport视窗的宽高进行计算的单位。说白了,就是相对于浏览器的窗口的大小。

vw单位

vw是相对于视窗宽度的单位,

 1vw=1/100浏览器宽度。


vh单位

vh是相对于视窗高度的单位,

1vh=1/100浏览器高度。


vw vh的用途。

vw vh相对于浏览器的窗口的大小,代码如下:

.div1{
    width:50vw;
    height:50vh;
}
.div2{
    width:50vw;
    height:50vw;
}

vw vh一般情况下他可以用我们常用的50%等百分比来替代,但是vw vh有百分比实现不了的长处。

比如我们实现一个在浏览器正中央的正方向div

代码如下:

.vw_vh{
    position:absolute;
    width:30vw;
    height:30vw;
    border:1px solid #ccc;
    background: darksalmon;
    left:35vw;
    top:50%;
    margin-top:-15vw;
}
<div class="vw_vh"></div>


效果如下:

vw.png

点击这里vw vh实现的居中正方形

通过vw vh实现的布局可以适应浏览器的resize改变。

上述代码,我们通过宽高30vw,实现一个正方形,left值可以直接计算出来(100vw-30vw)/2=35vw,top值通过top:50%,margin-top:-15vw实现上下居中。

vw单位,vh单位兼容性

vhcompat.png


vw vh结语

vw vh可以方便我们实现很多特殊布局,而免去了js的计算,这是css3的一大进步,我们要善加利用。从而简化我们的前端工作。依靠浏览器支持实现的布局,比我们通过js计算实现的布局总是要完美一些。而切vw,vh的兼容性情况很乐观。随着windows10的越来越普遍,越来越完善,IE8浏览器正在逐步消失,即使是一些PC端的页面,我们也可以抛弃IE8浏览器,让CSS3大放光彩。


原创文章,转载请注明来自:妹纸前端-www.webfront-js.com.
阅读(8641)
辛苦了,打赏喝个咖啡
微信
支付宝
妹纸前端
妹纸前端工作室 | 文章不断更新中
京ICP备16005385号-1