css3的vw单位,vh单位的讲解，以及vw vh的兼容性

朴灿烈づ我的快乐病毒、 2023-07-19 08:08 23阅读 0赞

## vw vh的介绍 ##

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

vw单位  
vw是相对于视窗宽度的单位，  
1vw=1/100浏览器宽度。

vh单位  
vh是相对于视窗高度的单位，  
1vh=1/100浏览器高度。

**vw vh的用途**  
vw vh相对于浏览器的窗口的大小，代码如下：

.div{ 
        width:50vw;
        height:50vh;
    }

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

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

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

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEyMDA1NjI_size_16_color_FFFFFF_t_70]: /images/20230528/7d140d91ed0c410db92f9278109068fe.png