CSS视口单位:快速入门

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

单位意义

CSS中有四个基于视口单位，分别为vh、vw、vmin和vmax。

• 视口高度（vh）- 这个单位表示视口的高度。1vh等于视口高度的1%；
• 视口宽度（vw）-这个单位表示视口的宽度。1vw等于视口宽度的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。

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

如上面例子，第一个子元素被设为父元素宽度的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;
}复制代码

创造完美适应的标题

你也许听过或使用过FitText插件。能够使用此插件缩放标题，他们会占据父元素的宽度。正如上文提过，视口单位的值会基于视口尺寸改变。这就意味着若是你使用视口单位设置标题的font-size，会很完美适应屏幕。不管视口宽度何时改变，浏览器会恰当地缩放标题。所要作就是计算出就视口单位而言font-size初始值。

设置font-size主要问题是文本大小会基于视口改变。例如，font-size值为8vw，则屏幕宽度1200px时，font-size为96px；宽度为400px，值为33px；宽度为1920px时，值为154px。这就会让文本太大或过小而没法阅读。能够阅读《基于排版的视口单位》这篇文章，结合calc()函数，设置刚好的文本大小

居中元素

当想把元素放在屏幕中央时，能够使用视口单位。在知道元素高度状况下，设置margin头部和底部属性等于[(100-height)/2]vh

.centered {
  width: 60vw;
  height: 70vh;
  margin: 15vh auto;
}复制代码

注意事项

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

注意当使用视口单位设置元素宽度时，由于当根本元素的overflow属性设为auto时，浏览器会假设滚动条不存在，会形成元素宽度大于你所期待的。

举个例子

div {
  height: 50vh;
  width: 50vw;
  float: left;
}复制代码

正常状况下，你期待每一个div元素占据屏幕的四分之一，而后每一个元素宽度是基于没有滚动条下计算的。因此其宽度会大于。

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

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

浏览器支持

在caniuse数据显示，主要的浏览器都支持这些单位。然而，仍有一些bug和问题须要注意。例如，IE9支持vm而不是vmin，IE10+/Edge不支持vmax单位，一样当使用视口单位，Chrome不会打印元素