編碼的世界 / 優質文選 / 生涯

css3的vw單位,vh單位的講解,以及vw vh的兼容性


2021年9月13日
-   

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改變。 vw vh結語 vw vh可以方便我們實現很多特殊布局,而免去了js的計算,這是css3的一大進步,我們要善加利用。從而簡化我們的前端工作。依靠瀏覽器支持實現的布局,比我們通過js計算實現的布局總是要完美一些。而切vw,vh的兼容性情況很樂觀。隨著windows10的越來越普遍,越來越完善,IE8瀏覽器正在逐步消失,即使是一些PC端的頁面,我們也可以拋棄IE8瀏覽器,讓CSS3大放光彩。

熱門文章