码迷,mamicode.com
首页 > Web开发 > 详细

CSS3视口单位vw,wh

时间:2019-08-06 21:21:49      阅读:70      评论:0      收藏:0      [点我收藏+]

标签:auto   根据   之一   布局   box   垂直   pre   利用   class   

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

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

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

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

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

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

CSS3视口单位vw,wh

标签:auto   根据   之一   布局   box   垂直   pre   利用   class   

原文地址:https://www.cnblogs.com/zhoajiahao/p/11311850.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有 京ICP备13008772号-2
迷上了代码!