在css的众多长度单位中，vw属于视口相关单位的一种，它的取值直接和当前视口的宽度挂钩，是响应式布局中非常实用的工具。理解vw的含义和使用规则，能让很多布局场景的实现变得更简单。
vw单位的基本定义
vw是viewport width的缩写，翻译为视口宽度，1vw等于当前视口宽度的1%。这里的视口指的是浏览器用来显示网页内容的区域，不包含浏览器的地址栏、工具栏等部分。
举个例子，如果当前浏览器视口的宽度是1200px，那么1vw就等于12px，10vw就是120px，50vw就是600px。当视口宽度发生变化时，vw对应的实际像素值也会同步变化。
vw单位的计算规则
vw的计算逻辑非常简单，核心公式如下：
vw对应的像素值 = 视口宽度 × vw数值 ÷ 100
我们可以通过一个简单的代码示例来验证这个计算规则，下面的代码会在页面中展示一个宽度是50vw的盒子：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vw单位示例</title>
<style>
.box {
width: 50vw;
height: 100px;
background-color: #4CAF50;
color: white;
text-align: center;
line-height: 100px;
}
</style>
</head>
<body>
<div class="box">宽度是50vw的盒子</div>
</body>
</html>
如果此时视口宽度是1000px，那么这个盒子的宽度就是500px；如果把浏览器窗口拉宽到1400px，盒子宽度会自动变成700px，不需要任何额外的媒体查询代码。
vw单位的常见使用场景
1. 实现响应式宽度布局
传统的响应式布局经常需要用媒体查询针对不同屏幕宽度设置不同的固定宽度，而使用vw可以直接让元素宽度跟随视口变化，减少媒体查询的使用。
比如我们需要一个在移动端占满全屏、在桌面端最大宽度不超过1200px的内容容器，用vw可以这样写：
.container {
width: 90vw; /* 视口宽度的90% */
max-width: 1200px; /* 最大宽度限制 */
margin: 0 auto; /* 水平居中 */
}
2. 设置响应式字体大小
除了元素宽度，vw也可以用来设置字体大小，让文字尺寸跟随视口变化，避免在小屏幕上文字过大或者大屏幕上文字过小的问题。
body {
font-size: 2vw; /* 字体大小为视口宽度的2% */
}
/* 搭配最大最小字体限制，避免极端情况 */
@media (max-width: 768px) {
body {
font-size: 16px; /* 小屏幕最小字体16px */
}
}
@media (min-width: 1920px) {
body {
font-size: 24px; /* 大屏幕最大字体24px */
}
}
3. 实现等比例缩放的元素
如果需要元素保持固定的宽高比，同时宽度跟随视口变化，可以结合vw设置高度。比如要实现一个宽高比是16:9的容器：
.ratio-box {
width: 80vw; /* 宽度是视口宽度的80% */
height: calc(80vw * 9 / 16); /* 高度根据宽高比计算，80vw乘以9除以16 */
background-color: #2196F3;
}
vw和其他视口单位的区别
除了vw之外，css还有几个类似的视口单位，它们的含义如下：
vh：viewport height，视口高度的1%，1vh等于视口高度的1%vmin：视口宽度和高度中较小的那个的1%，比如视口宽1000px高800px，1vmin就是8pxvmax：视口宽度和高度中较大的那个的1%，比如视口宽1000px高800px，1vmax就是10px
和这些单位相比，vw更常用于和宽度相关的布局场景，而vh更适合和垂直方向尺寸相关的需求。
使用vw单位的注意事项
虽然vw单位很好用，但使用时也有一些需要注意的点：
- vw是相对于视口宽度的，在iframe或者某些嵌入式场景中，视口宽度可能不是你预期的值，需要提前测试
- 不要给所有元素都设置vw单位，比如边框、内边距等固定尺寸的元素，用px或者rem会更合适
- 当视口宽度特别小或者特别大的时候，vw计算出来的数值可能会不符合预期，建议搭配min-width、max-width等属性做限制
需要注意的是，在css中写<input>标签相关的样式时，如果用到vw单位，同样是按照视口宽度的百分比计算，和常规元素的规则一致。