vw

版本：CSS3

vw：视窗口区域的初始包含块的宽度的1%。

视窗口区域单位

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

比方说，我们又是个宽1000px，高800px的视口：

• vw ——代表视口宽度的1%。例子 50vw = 500px。
• vh ——窗口高度的百分比。50vh = 400px。
• vmin ——是当前vw和vh两个值中较小的那个值。由于在我们这个例子中页面呈现方式是横向模式，所以 50vmin = 400px。
• vmax ——大尺寸的百分比。50vmax = 500px。

浏览器支持

说明：

相对于视口的宽度。视口被均分为100单位的vw

示例代码：

h1{font-size: 8vw;}

如果视口的宽度是200mm，那么上述代码中h1元素的字号将为16mm，即(8x200)/100

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

在某些情况下，你希望子元素的大小根据窗口进行改变而不是他的父元素。如果我们使用vw来设置我们的子元素，那么子元素将会简单地溢出它的父元素并且占满整个页面的全部宽度。

#parent{width: 400px;}
#child{width: 100vw;}

响应式字体大小

视口单位也可以在文本中运用！在这个例子中我们可以通过vw设置字体大小来创建一行很棒的CSS响应式文字

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

等宽列

你可以使用视口单位来实现响应式网格。他们的实现方式类似百分比，但总是根据视口的大小进行调整。所以你可以把他们放在一个比窗口宽的父元素中，并且仍有网格来保持其应有宽度。这样可以方便快速地建立全屏滑块。这项技术要求元素拥有float: left;样式来对齐彼此相邻的元素

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

实例

p{font-size:5vw;} 
相对于viewport宽度大小的文字

效果图：

鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com