CSS 中的 Viewport Units

[classicemi]

viewport unit是一系列以视口尺寸为基准的单位，其中包括vw、vh、vmin和vmax。它们被几乎所有的现代浏览器所支持，在 IE 系列中的兼容性问题如下：

• IE8- 不支持
• IE10、IE11 不支持vmax
• IE9 中vmin写作vm

假设视口尺寸为 1000px * 800px。

• vw：表示视口宽度的 1%，即 10px
• vh：表示视口高度的 1%，即 8px
• vmin：表示视口高度和宽度较小者的 1%，即 8px
• vmax：表示视口高度和宽度较大者的 1%，即 10px

在响应式设计中，常用的一个相对单位是rem，它是以根节点上的font-size值为标准的，而根节点上的font-size值通常要通过 JS 根据视口尺寸进行动态修改。而使用视口单位则可以避免 JS 的使用，比较方便的应用场景举例：

1. 便于设置 100% 的高度

如果要使height: 100%;这样的属性生效的话，要同时在body和html标签上都设置height: 100%;，这不仅麻烦，也有可能打乱已有的布局。这种情况下可以使用vh达到目的：

#element {
    height: 100vh;
}

2. 将子元素的尺寸与视口尺寸关联

如果子元素的尺寸需要以视口为标准的话，传统的百分比单位是做不到的：

#parent {
    width: 100px;
}
#child {
    width: 100%;
}

这里的 #child 元素的宽度只能展示为和 #parent 元素一样的大小。而使用vw属性可以避免这个问题：

#child {
    width: 100vw;
}

这里的 #child 元素的宽度将会展示为视口的完整宽度，摆脱了父元素的限制。

3. 响应式字体大小

font-size值使用视口单位的话就可以根据视口尺寸动态改变，而不需要使用 JS 了。

h1 {
    font-size: 2vw;
}

4. 垂直居中

垂直居中在传统 CSS 中一直是一个比较棘手的问题，通过借助视口单位可以方便地实现垂直居中：

#element {
    width: 50vw;
    height: 50vh;
    margin: 25vh auto;
}

只要垂直方向上的height和margin值相加为 100vh 即可实现垂直居中。要实现在父元素中的垂直居中，只要相加后和父元素的总高度相等即可。

5. 等宽栏

响应式网格的宽度可以使用视口单位简单定制，由于它们不受父元素大小影响，所以即使将它们放在不同宽度的父元素中，它们也能根据视口尺寸准确定宽：

.col-2 {
    float: left;
    width: 50vw;
}
.col-8 {
    float: left;
    width: 12.5vw;
}