CSS视口单位:快速入门

单位意义

视口单位的应用
全屏背景图片或部分

创造完美适应的标题

居中元素

注意事项

浏览器支持

翻译自CSS Viewport Units: A Quick Start。此文章简单介绍了视口单位及其应用，用于提升大家css知识的广度

单位意义

CSS中有四个基于视口单位，分别为

vh

、

vw

、

vmin

和

vmax

。

视口高度（vh）- 这个单位表示视口的高度。

1vh

等于视口高度的1%；

视口宽度（vw）-这个单位表示视口的宽度。

1vm

等于视口宽度的1%；

视口最小值（vmin）- 这个单位表示视口的更小尺寸。如果视口高度小于宽度，

1vmin

等于视口高度1%。同样，如果宽度小于高度，

1vmin

代表视口宽度1%。

视口最大值（vmax）-这个单位表示视口的更大尺寸。如果视口高度大于宽度，

1vmax

等于视口高度1%。同样，如果宽度大于高度，

1vmax

代表视口宽度1%。

在不同情形下，这些单位的值代表什么

- 如果视口宽1200px，高1000px。则

10vw

值为120px，

10vh

为100px。因为宽度大于高度，

10vmax

等于120px，

10vmin

等于100px。

- 如果现在设备旋转，宽为1000px，高1200px。则

10vw

值为100px，

10vh

为120px。

10vmax

仍等于120px，因为高度仍大于宽度，

10vmin

等于100px。

- 如果重新设计窗口以至于视口宽1000px，高800px，则

10vw

值为100px，

10vh

为80px。因为宽度大于高度，

10vmax

等于100px，

10vmin

等于80px。

在这一点上，视口单位也许小于百分数。然而，他们是不同的，就百分数而言，子元素宽度和高度取决于其父元素。

See the Pen <a href="https://codepen.io/owen1190/pen/EmNJzb/">EmNJzb</a> by yuweijie (<a href="http://codepen.io/owen1190">@owen1190</a>) on <a href="http://codepen.io">CodePen</a>.

如上面例子，第一个子元素被设为父元素宽度的80%。第二个子元素为宽度的80vw，而其宽于父元素

视口单位的应用

因为这些单位基于视口尺寸，所以在相对于视口设置元素的宽度和高度时，使用它们非常方便。

全屏背景图片或部分

设置元素的背景图片充满屏幕这种方式很常见。同样，你也许想设计一个网站，其产品或服务的部分覆盖整个屏幕。这样情况下，你可以设置响应元素宽度为

100%

，高为

100vh

。

举个例子，

<div class="fullscreen a">
<p>a<p>
</div>

你可以使用以下CSS来实现背景图片部分：

.fullscreen {
width: 100%;
height: 100vh;
padding: 40vh;
}

.a {
background: url('path/to/image.jpg') center/cover;
}

See the Pen <a href="https://codepen.io/owen1190/pen/wdgJLw/">wdgJLw</a> by yuweijie (<a href="http://codepen.io/owen1190">@owen1190</a>) on <a href="http://codepen.io">CodePen</a>.

创造完美适应的标题

你也许听过或使用过FitText插件。可以使用此插件缩放标题，他们会占据父元素的宽度。正如上文提过，视口单位的值会基于视口尺寸改变。这就意味着如果你使用视口单位设置标题的

font-size

，会很完美适应屏幕。无论视口宽度什么时候改变，浏览器会恰当地缩放标题。所要做就是计算出就视口单位而言

font-size

初始值。

设置

font-size

主要问题是文本大小会基于视口改变。例如，

font-size

值为

8vw

，则屏幕宽度

1200px

时，

font-size

为

96px

；宽度为

400px

，值为

33px

；宽度为

1920px

时，值为

154px

。这就会让文本太大或太小而无法阅读。可以阅读《基于排版的视口单位》这篇文章，结合

calc()

函数，设置恰好的文本大小

See the Pen <a href="https://codepen.io/owen1190/pen/zwNZVd/">zwNZVd</a> by yuweijie (<a href="http://codepen.io/owen1190">@owen1190</a>) on <a href="http://codepen.io">CodePen</a>.

居中元素

当想把元素放在屏幕中央时，可以使用视口单位。在知道元素高度情况下，设置

margin

头部和底部属性等于

[(100-height)/2]vh

.centered {
width: 60vw;
height: 70vh;
margin: 15vh auto;
}

See the Pen <a href="https://codepen.io/owen1190/pen/vmgxqQ/">vmgxqQ</a> by yuweijie (<a href="http://codepen.io/owen1190">@owen1190</a>) on <a href="http://codepen.io">CodePen</a>.

注意事项

使用视口单位时，需要注意一些事情。

注意当使用视口单位设置元素宽度时，因为当根本元素的

overflow

属性设为

auto

时，浏览器会假设滚动条不存在，会造成元素宽度大于你所期待的。

举个例子

div {
height: 50vh;
width: 50vw;
float: left;
}

正常情况下，你期待每个

div

元素占据屏幕的四分之一，然后每个元素宽度是基于没有滚动条下计算的。所以其宽度会大于。

See the Pen <a href="https://codepen.io/owen1190/pen/zwNZgd/">zwNZgd</a> by yuweijie (<a href="http://codepen.io/owen1190">@owen1190</a>) on <a href="http://codepen.io">CodePen</a>.

解决办法是设置宽度为50%。结论是当设置块级元素宽度应使用百分数。

同样问题也会发生在移动端，因为地址栏出现与否取决于用户是否在滚动。会导致视口高度改变，用户在看内容时会吓一跳。

浏览器支持

在caniuse数据显示，主要的浏览器都支持这些单位。然而，仍有一些bug和问题需要注意。例如，IE9支持

vm

而不是

vmin

，IE10+/Edge不支持

vmax

单位，同样当使用视口单位，Chrome不会打印元素