CSS Viewport 单位 实现快速布局

**CSS Viewport units(视口单位)**在过去几年已经出现了，随着时间的推移，越来越多的开发人员开始使用它们。它们的好处在于为我们提供了一种不需要使用J avaScript 就能以动态的方式调整大小的方法。而且，如果它失效，也有很多备用方案。

在本文中，我们将学习 CSS Viewport units(视口单位)以及如何使用它们，并用列举一些常见问题及其解决方案和用例，让我们开始吧。

简介

根据CSS规范，视口百分比单位相对于初始包含块的大小，它是web页面的根元素。

视口单位为：vw，vh，vmin和vmax。

vw单位表示根元素宽度的百分比。1vw等于视口宽度的1%。

视口宽度

vw单位表示根元素宽度的百分比，1vw等于视口宽度的1%。

假设我们有一个元素与以下CSS：

.element {
    width: 50vw;
}

当视口宽度为500px时，50vw计算如下

width = 500*50% = 250px

视口高度

vh单位表示根元素高度的百分比，一个vh等于视口高度的1%。

我们有一个元素与以下CSS:

.element {
    height: 50vh;
}

当视口高度为290px时，70vh计算如下:

height = 290*70% = 202px

大家都说简历没项目写，我就帮大家找了一个项目，还附赠