html文件怎么生产vm页面,认识视口单位vm、vh在网页中的排版应用

在之前的两篇关于构建模块化的文章中，谈到了 rem & em 和 响应式排版，而在文章的评论中，对基于视口单位的网页排版抱有很大的想象空间。

由于视口单位涉及到计算，有一段时间我是抵制在工作使用视口单位。但就在上周，我克服了心中的抵制情绪，开始去了解视口单位在网页排版中的使用。在深入介绍视口单位以及其在网页排版中的工作原理时，先了解下有哪些常见的视口单位。

视口单位是什么？

在 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)

}