简单总结CSS3中视窗单位Viewport的常见用法

介绍视窗(Viewport)单位

视窗(Viewport)是你的浏览器实际显示内容的区域——换句话说是你的不包括工具栏和按钮的网页浏览器。这些单位是vw,vh,vmin和vmax。它们都代表了浏览器（视窗(Viewport)）尺寸的比例和窗口大小调整产生的规模改变。

比方说我们有一个1000px（宽）和800px（高）的视窗(Viewport)

vw——代表视窗(Viewport)的宽度为1%，在我们的例子里50vw = 500px。
vh——窗口高度的百分比 50vh = 400px。
vmin——vmin的值是当前vw和vh中较小的值。在我们的例子里因为是横向模式，所以50vim = 400px。
vmax——大尺寸的百分比。50vmax = 500px。
你可以在任何一个可以使用像素值的地方使用它们，比如width,height,margin,font-size等等。它们将通过窗口大小的调整或旋转设备的浏览器来重新计算这些值。

占用页面的整个高度

每一个前端开发人员都致力于这件事。你的第一直觉是这样做：

CSS Code 复制内容到剪贴板

#elem{
    height: 100%;
}

然而，除非我们为html和body添加100%的高度，但只是这样还是不行的，因为这样的代码并不优雅而且很有可能会破坏你的设计的其余部分。使用vh就变得相当容易了，只需要为高度设置100vh，那它将永远都是你窗口的高度。

CSS Code 复制内容到剪贴板

#elem{
    height: 100vh;
}

视口宽度大小
vw是CSS3新加入的一个使用视口宽度来计算字体大小的单位。这样可以允许更多的响应字体大小。

尽管这似乎是为响应式设计的一个很有用的单位，但我个人不是它的粉丝。因为它并不能在字体大小上给我更多的控制权，他总是显示的过大或过小。

我的方法

在我做这项研究之前，我一直使用像素来设置我的字体大小。这是因为现在的大多数浏览器允许用户在字体太小的情况下自行放大页面，所以使用像素并没有什么问题。

但是，我发现这种方式在很大程度上限制了扩展能力。虽然我的字体在中小屏幕上看起来不错，但他应该在大屏幕上有更好的优化。即便用户有放大的选项，这也不应该是我们希望他们来做的事情。

因此我使用rem设置的解决方案是(使用像素作为备用)。

CSS Code 复制内容到剪贴板

html {
  font-size: 62.5%; /* sets the base font to 10px for easier math */
}
body {
  font-size: 16px;
  font-size: 1.6rem;
  /* sets the default sizing to make sure nothing is actually 10px */
}
h1 {
  font-size: 32px;
  font-size: 3.2rem;
}

这样我扩大了字体大小而只需要这样写——

CSS Code 复制内容到剪贴板

@media screen and (min-width: 1280px) {
  html {
    font-size: 100%;
  }
}

这个方法是用像素作为降级单位因为IE8及以下不支持rem。这有一个问题是当我改变基础字体大小时只能应用在可扩展性大小上面而不适用于后备字体大小。不过我不认为这是一个巨大的问题，因为这个问题对于较大规模的设备的核心来说只是一个额外的问题。

如果你有任何关于如何改善这个问题的想法，请在评论里让我知道。我也可以写一个SCSS的混入，这样我可以不必输入这两个后备和rem单位。

子元素大小根据浏览器改变而不是父元素

在某些情况下，你想要的是子元素的大小相对于窗口改变而不是父元素。同样的，按照前面的例子，这样是不行的：

CSS Code 复制内容到剪贴板

#parent{
    width: 400px;
}
#child{
    /* This is equal to 100% of the parent width, not the whole page. */
    width: 100%;
}
如果我们用vw来设置子元素，那么它会简单的溢出并采取网页的全宽：

#parent{
    width: 400px;
}
#child{
    /* This is equal to 100% of page, regardless of the parent size. */
    width: 100vw;
}

响应垂直居中

通过设置元素的width,height和margin的视窗(Viewport)单位，你可以不使用任何其它技巧来设置居中。

这里有一个高度为60vh 上下外边距为20vh的矩形，它们加起来是100vh(60+2*20)，使它即便调整窗口大小也可以始终居中。

CSS Code 复制内容到剪贴板

#rectangle{
    width: 60vw;
    height: 60vh;
    margin: 20vh auto;
}

等宽列

你可以使用视窗(Viewport)单位来设置响应式网格。它们的行为类似于百分比但总是相对于视窗(Viewport)的大小。所以你可以将它们放在一个比窗口宽的父元素里，但它仍然有网格来保持其应有的宽度。这样来创建全屏滑块可谓得心应手。

这项技术需要元素用float:left来对齐彼此相邻的元素：

CSS Code 复制内容到剪贴板

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

总结

视窗(Viewport)单位有它的用途而且值得尝试。它们易于理解，而且在某些情况下对于代替CSS更加难的解决方案或不可能实现的技术有非常大的帮助。