使用神奇的CSS视区单位来简化样式表

CSS视区单位（Viewport units）被推出已经有好几年时间了，但是真正去使用它们的人并不多。这些视区单位如今已经被绝大多数现代浏览器所支持。它们特殊的功能在特定的地方时非常有用的，它们可以简化许多不必要的CSS代码，特别是用于制作响应式网站的时候。

视区单位介绍

视区是指浏览器的内容可视区域，通俗来说就是指你的浏览器不带工具栏和信息栏的部分。这些视区单位有：vw，vh，vmin和vmax。他们都代表浏览器（视区）尺寸的一个百分比值，并且会更具窗口尺寸的改变而相应的调整。

例如我们有一个宽1000px，高800px的视区，那么：

• vw：代表1%的视区宽度。在这里50vw=500px
• vh：代表1%的视区高度。在这里50vh=400px
• vmin：代表视区宽度和高度中较小的值的百分比。这里50vmin=400px
• vmax：代表视区宽度和高度中较打的值的百分比。这里50vmax=500px

你可以在任何可以使用像素为单位的属性中使用这些视区单位，例如：width，height，margin，font-size等等。它们会在浏览器窗口被缩放或手机设备被有竖屏转为横屏时被重新计算。

和页面等高的元素

每一个前端开发者都会遇到使一个元素的高度等于页面的高度的情况，我们首先会想到的是：

#elem{
    height: 100%;
}                              
                            

然而，这种做法除非我们在body或html元素上添加一个100%高度，否则它得不到正确的结果。这时候，我们可以使用vh作为单位，只要设置元素的高度为100vh，那么不论什么时候，它的高度总是和页面高度相等。

#elem{
    height: 100vh;
}                              
                            

下面是一个模拟效果，假设黄色区域时浏览器的视区部分，那么橙色元素设置为100vh时的效果。

子元素的尺寸相对于浏览器而不是父元素

在某些情况下，你需要设置一个子元素的宽度或高度是相对于窗口而不是它的父元素。例如我们这样设置：

#parent{
    width: 400px;
}
#child{ 
    /* 这个宽度设置会使child元素的宽度等于100%父元素的宽度，而不是100%页面的宽度 */ 
    width: 100%; 
}                              
                            

我们这里可以使用vw来作为子元素的视口单位，这样子元素的宽度就是整个页面的宽度而不是父元素的宽度。

#parent{
    width: 400px;
}
#child{
    /* 子元素的宽度等于100%页面的宽度 */
    width: 100vw;
}                              
                            

响应式字体

视区单位也可以应用在文字上。在这个例子中我们使用一句CSS代码就可以创建响应式的字体效果。

h2.responsive-text{
    font-size: 6vw;
}
h4.responsive-text{
    font-size: 3vw;
}                              
                            

响应式垂直居中

通过使用视区单位来设置一个元素的宽度，高度和margins，不需要任何的技巧，就可以将这个元素相对于页面居中。

例如设置一个长方形的高度为60vh，上下的margins值都为20vh，这样做是使它们的总和等于100vh，这样不论窗口尺寸如何变化，这个长方形都是垂直居中于页面的。

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

响应式等宽网格布局

你还可以使用视区单位来制作一个响应式的网格布局。它们和基于百分比制作的网格效果类似，但是总是会相对于视区来修改它们的尺寸。这个技术要求元素都是左浮动的，这样使网格能一个接一个的排列。

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

小结

视区单位有它们的特殊用途，我们应该尝试去使用它们。它们都是十分简单易用的，在某些情况下对我们非常有帮助，它们可以大大简化我们的CSS样式表，如果使用其它的CSS计算来解决这些问题将会使事倍功半的效果。希望这篇文章对你有所帮助。