【CSS3】移动端自适应单位-vh、vw计量单位

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

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

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

这边顺便提一下vmin和vmax，vmin是指选择vw和vh中最小的那个，而vmax是选择最大的那个

代码贴上（vw同理）

// 假设浏览器高度900px, 
// 1 vh = 900px/100 = 9px

// height: 100vh 与 height:100%的区别
height: 100vh：//当元素没有内容时候，会撑开，与屏幕高度保持一致
height: 100%： //当元素没有内容时候，不会撑开

通过vw轻松实现bootstrap的栅栏布局

.col-2 { 
  float: left; 
  width: 50vw; 
} 
.col-4 { 
  float: left; 
  width: 25vw; 
} 
.col-5 { 
  float: left; 
  width: 20vw; 
} 
.col-8 { 
  float: left; 
  width: 12.5vw; 
}

本文为翻滚的胖子原创文章,转载无需和我联系,但请注明来自猿教程iskeys.com

• 上一篇： 【PHP】获取当天日期时间/时间戳
• 下一篇： 【CSS3】CSS实现页面样式变灰色