视口单位vm、vh在网页中的排版应用

 　　视口单位是什么?　在 CSS 规范中，有4种类型的可用视口单位：

　　vw --- 1vw 等于视口宽度的 1%

　　vh --- 1vh 等于视口高度的 1%

　　vmin --- vw 和 vh 中的较小值

　　vmax --- vw 和 vh 中的较大值

　　视口，即浏览器屏幕大小，1vw 等于浏览器宽度的 1%，100vw 即整个浏览器的宽度。

　　视口的单位大小会根据视口大小的改变自动计算，视口大小的改变常发生于页面加载、页面缩放或者屏幕方向的改变(横纵切换)。正因为如此，创建一个大小总为视口四分之一大小的容器是非常容易滴：

　　.component {

　　width: 50vw;

　　height: 50vh;

　　background: rgba(255, 0, 0, 0.25)

　　}

　　将视口单位用于网页排版

　　将视口单位用于网页排版的唯一理由就是视口的单位大小会根据客户端浏览器的视口大小自动计算。也就是说，我们不必明确地通过媒体查询来声明字体大小。举个demo来简要说明一下。

　　代码如下，将断点设置为 800px，字体大小从 16px 变为 20px：

　　html {

　　font-size: 16px;

　　@media (min-width: 800px) {

　　font-size: 20px;

　　}

　　}

　　对于上述代码，当视口大小是 800px 时，字体会从 16px "突变" 到 20px。在响应式排版中，这是经常采用的方式。有时，你会碰到在两个断点之间添加额外的媒体查询来确保页面排版适应所有设备：

　　html {

　　font-size: 16px;

　　@media (min-width: 600px) {

　　font-size: 18px;

　　}

　　@media (min-width: 800px) {

　　font-size: 20px;

　　}

　　}

　　尽管这样做能达到效果，但需要更多特定的媒体查询规则和字体大小。通常，会选择 3~4 中字体大小。

　　但是，如何不同媒体查询或字体大小的设置来达到同样的效果呢?

　　当然是有滴，这就是视口单位的用处了。你可以用视口单位来表示字体大小：

　　html { font-size: 3vw; }