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

 

　　视口单位为：，和。

 

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

 

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

 

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

 

　　当视口宽度为时，计算如下

 

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

 

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

 

　　当视口高度为时，计算如下：

 

　　表示视口的宽度和高度中的较小值，也就是 和  中的较小值。如果视口宽度大于其高度，则将根据高度计算该值。

 

　　我们以下面的例子为例。

 

　　我们有一个横屏手机，其中有一个元素具有单元。在这种情况下，值将根据视口高度计算，因为它小于宽度。

 

　　这是的计算方式：

 

　　正如你所猜测的，计算结果如下所示

 

　　与相反，该值是 和  中的较大值。

 

　　我们以下面的例子为例。

 

　　计算结果如下：

 

　　视口单位基于页面的根元素，而百分比则基于它们所在的容器。因此，它们彼此不同，但各自都有各自的用处。

 

　　字体大小

 

　　CSS 视口单位非常适合响应式排版。 例如，我们可以将以下内容用作文章标题：

 

　　标题的将根据视口宽度增加或缩小。 就像提供的字体大小是视口宽度的一样。 但是，如果没有适当的测试就直接使用它可能会踩到坑。 让我们看下面的视频：

 

　　体大小变得非常小，这不利于可访问性和用户体验。据我所知，移动设备上的最小字体大小不应该不于。在GIF中，不小于。

 

　　要解决该问题，我们需要为标题提供最小字体大小，可以使用

 

　　CSS函数将具有一个最小值，并在些基础上添加的值，有了这些，字体大小值就不会变得太小。

 

　　另一个需要考虑的重要问题是字体大小在大屏幕上的表现，例如 。会发生什么呢？你猜对了，字体大小为左右，这是一个很大的值。为了防止这种情况，我们应该在某些断点上使用媒体查询并更改字体大小。

 

　　通过重置字体大小，我们可以确保大小不会太大。您可能还需要添加多个媒体查询，但这取决于你自己，也取决于项目的上下文。

 

　　事例地址：

 

　　全屏

 

　　有时，我们需要一个来获取的视口高度，为此，我们可以使用高度单位。

 

　　通过添加 ，我们可以确保 高度将采取的视口。此外，我们添加了一些来处理水平和垂直居中的内容。

 

　　事例源码：

 

　　粘性布局（footer）

 

　　在大屏幕上，网站内容有时候很少， 没有粘在底部。这很正常，也不被认为是一种不好的做法。但是，还有改进的余地。考虑下面代表问题的示图：

 

　　为了解决这个问题，我们需要给内容（content）一个高度，它等于视口高度- （header + footer）。动态地做到这一点是很困难的，但是使用CSS的视口，这是很容易的。

 

　　第一种解决方案：和视口单位

 

　　如果 和的高度是固定的，那么可以将函数和视口单位结合起来，如下所示：

 

　　不能保证此解决方案始终有效，尤其是对而言。 在我的职业生涯中，我没有使用固定高度的页脚，因为在例如不同的屏幕尺寸下，此是不可行的。

 

　　2.第二种解决方案：Flexbox和视口单位（推荐）

 

　　通过将设置为元素的高度，然后可以使用flexbox来使元素占用剩余空间。

 

　　这样，问题就解决了，无论内容长度如何，我们都有一个粘性。

 

　　事例源码：

 

　　响应式元素

 

　　假设我们有一个作品集来展示我们的响应式设计工作，并且我们有三种设备（移动设备、平板电脑和笔记本电脑）。每个设备包含一个图像。目标使用 CSS 来响应适配这些页面。

 

　　通过使用CSS网格和视口单位，我们可以使其完全动态的响应式。

 

　　视口单位也可以用于属性，也用于，和其他属性。

 

　　例：

 

　　从容器中挣脱出来

 

　　我注意到一个用例最适合编辑版面。 一个子元素，即使父元素的宽度受到限制，它也会占据视口的宽度。 考虑下面：

 

　　让我们把它分解一下，这样我们就能一点一点地理解所有这些属性是如何工作的。

 

　　1.添加

 

　　最重要的一步，将图像的宽度设置为的视口。

 

　　2.添加

 

　　为了使图像居中，我们需要给它一个负的边距，其宽度为视口宽度的一半。

 

　　3.添加

 

　　最后，我们需要将图像向右推，其值为父宽度的。

 

　　事例地址：

 

　　垂直和水平间距

 

　　我想到的另一个有趣的用例是使用视口单位来表示元素之间的间距。这可以与、、和等值一起使用。使用时，间距将基于视口宽度或高度，这对于使布局更具动态性可能很有用。

 

　　模态框

 

　　对于模态，我们需要将它们从视口顶部推入。 通常，使用属性进行此操作，并使用百分比或像素值。 但是，对于视口单位，我们可以添加一个可以根据视口高度改变的间距。

 

　　事例地址：

 

　　页面头部

 

　　页面 是充当页面介绍的部分。 它通常具有标题和描述，并且其中上下边缘的高度固定或填充

 

　　例如，有以下的CSS的样式：

 

　　使用单位用于页面标题的 paddding，以及标题下方的边距。 注意间距如何变化！

 

　　事例源码：

 

　　Vmin 和 Vmax 用例

 

　　该用例是关于页面标题元素的顶部和底部 。 当视口较小（移动）时，通常会减少。 通过使用，我们可以在视口较小尺寸（宽度或高度）的基础上获得合适的顶部和底部 。