CSS3视口单位vw,wh

Posted 2022-06-16 zhoajiahao

vw和vh是视口（viewport units）单位，何谓视口，就是根据你浏览器窗口的大小的单位，不受显示器分辨率的影响，是不是很神奇，这就代表了，我们不需要顾虑到现在那么多不同电脑有关分辨率的自适应问题。

vw是可视窗口的宽度单位，和百分比有点一样，1vw = 可视窗口的宽度的百分之一。比如窗口宽度大小是1800px，那么1vw = 18px。和百分比不一样的是，vw始终相对于可视窗口的宽度，而百分比和其父元素的宽度有关。

vh就是可视窗口的高度了。

他们能够根据窗口大小来自动调节字体大小，这就能很轻松地完成响应式页面的布局

利用vw,wh实现在页面中响应垂直居中，只需要以下代码

#box  
  width: 50vw; 
  height: 50vh; 
  margin: 25vh auto;