CSS 中的 VW

什么是 VW？

VW 是 视口宽度 的缩写。它是一个单位，表示视口宽度的百分比。如果我们设置元素的宽度为 1vw，则意味着视口宽度的 1%。同样，25vw 等于视口宽度的 25%。屏幕尺寸通过视口宽度进行增长和收缩。

VW 是一个非常有用的单位，因为它有助于创建响应式网页。如果我们以 vw 为单位设置元素的尺寸，那么宽度将根据屏幕尺寸进行调整。这意味着如果屏幕是电脑的，那么 vw 将根据电脑屏幕进行调整；如果屏幕是平板电脑的，那么 vw 将根据平板电脑屏幕进行调整。

利用 VW 单位的演示

我们将通过演示来理解 CSS 中的 vw。

演示 1

在此演示中，我们将创建一个列表，并将 <li> 元素的字体大小设置为 vw 单位。

代码

输出

在输出中，我们可以看到一个节日列表。<li> 元素的字体大小将根据屏幕大小进行调整。

演示 2

在此演示中，我们将创建一个咨询表单。我们将 <label> 元素的字体大小设置为 vw 单位，并使用 vw 单位设置输入元素的高度和宽度。

代码

输出

这是结果，我们可以看到一个咨询表单。<label> 元素的字体大小以及输入元素的高度和宽度将根据屏幕大小进行调整。

演示 3

在此示例中，我们将创建两个 <p> 元素，然后定义段落 1 的字体大小和高度（以 vw 为单位），并定义段落 2 的字体大小和宽度（以 vw 为单位）。

代码

输出

这是输出，我们可以看到段落将根据屏幕大小进行调整。

演示 4

在此示例中，我们将构建一个表格，并使用 vw 单位指定 <table> 元素的字体大小。

代码

输出

这是输出，我们可以看到一个表格，并且 <table> 元素的字体大小将根据屏幕大小进行调整。

演示 5

在此示例中，我们将构建一个网格，并使用 VW 单位指定网格项目的内边距和字体大小。

代码

输出

这是输出，其中我们可以看到一个网格，并且网格项目的内边距和字体大小将根据屏幕大小进行调整。

演示 6

在此示例中，我们将插入一个图像，并使用 vw 单位指定 <img> 元素的高度和宽度。

代码

输出

这是输出，我们可以看到一个图像，并且 <img> 元素的高度和宽度将根据屏幕大小进行调整。

浏览器支持

以下是支持视口宽度 (VW) 的浏览器

• 谷歌浏览器
• Opera
• Internet Explorer
• Safari
• Microsoft Edge
• 火狐

结论

在本文中，我们通过演示了解了 CSS 中的 VW。VW 表示 视口宽度 的百分比，并有助于创建响应式网页。