CSS3中使用视窗单位来布局的方法

小云云 原创: 2017-12-13 13:31:13 1292浏览

视窗(Viewport)单位已经有了好几年了，但我们并没有看到它被经常使用。它们现在正在被所有的主流浏览器所支持并提供独特的功能使它在特定情况下非常有用，特别是那些涉及响应式的设计。本文我们主要和大家分享CSS3中使用视窗单位来布局的方法，希望能帮助大家更好的学习css3的知识。

<script>ec(2);</script>

介绍视窗(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等等。它们将通过窗口大小的调整或旋转设备的浏览器来重新计算这些值。

占用页面的整个高度

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

#elem{
height: 100%;
}

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

#elem{
height: 100vh;
}

这似乎是一个完美的全屏图像的英雄，而且看起来非常时尚。

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

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

#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;
}

响应字体大小

视窗(Viewport)单位也可以在文本中使用呢！在这个例子中我们使用vm设置字体大小来创建一行很棒的CSS响应式文字。拜拜Fittext！

响应垂直居中

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

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

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

等宽列

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

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

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

相关推荐：