vw和vh是视口(viewport units)单位,何谓视口,就是根据你浏览器窗口的大小的单位,不受显示器分辨率的影响,是不是很神奇,这就代表了,我们不需要顾虑到现在那么多不同电脑有关分辨率的自适应问题。
vw是可视窗口的宽度单位,和百分比有点一样,1vw = 可视窗口的宽度的百分之一。比如窗口宽度大小是1800px,那么1vw = 18px。和百分比不一样的是,vw始终相对于可视窗口的宽度,而百分比和其父元素的宽度有关。
vh就是可视窗口的高度了。
他们能够根据窗口大小来自动调节字体大小,这就能很轻松地完成响应式页面的布局
利用vw,wh实现在页面中响应垂直居中,只需要以下代码
#box {
width: 50vw;
height: 50vh;
margin: 25vh auto;
}
原文地址:https://www.cnblogs.com/zhoajiahao/p/11311850.html
时间: 2024-10-12 19:19:30