在做响应式布局时，很多人习惯性地依赖媒体查询加固定像素值，结果每多一种屏幕尺寸就要多写一组断点，维护成本直线上升。其实CSS早就提供了一组更直接的方案——视口单位。vw、vh这类单位以浏览器可视区域为基准，元素设置之后会随窗口大小自动缩放，无论是定位还是对齐都能保持稳定的比例关系。本文围绕视口单位的实际用法展开，从原理讲到落地场景，帮你把响应式布局做得更省心。
视口单位是什么：从计算原理说起
视口单位一共有四个：vw、vh、vmin和vmax。其中1vw等于视口宽度的百分之一，1vh等于视口高度的百分之一。假设浏览器可视区域宽度是1920px，那么1vw就是19.2px；如果窗口缩小到375px，1vw就自动变成3.75px。整个换算过程完全动态，不需要任何媒体查询参与。
vmin和vmax是衍生单位：vmin取当前视口宽度和高度中较小的那个值作为基准，vmax则取较大的那个。这两个单位在保持元素宽高比不变的场景中特别有用，比如做一个始终是正方形的容器，用vmin作为尺寸单位，无论屏幕怎么旋转、怎么缩放，宽高始终一致。
需要特别区分的是视口单位和百分比单位的差异。百分比是相对父元素计算的，父元素宽度变了子元素的百分比结果才会变，层数一多就容易失控；而视口单位永远以浏览器窗口为唯一基准，跟DOM层级完全无关。这种特性让它在全屏布局、页面级定位时比百分比更可靠。当然，两者也可以配合使用，比如宽度用百分比跟随父容器，字号用vw跟随视口，各取所长。
用视口单位实现元素自适应定位与对齐
最常见的应用是让元素相对视口定位。比如一个返回顶部按钮，希望它固定在距离右侧和底部各一定比例的位置，用vw和vh写起来非常直观：
.back-to-top {
position: fixed;
right: 3vw; /* 距离右侧为视口宽度的3% */
bottom: 4vh; /* 距离底部为视口高度的4% */
width: 48px;
height: 48px;
border-radius: 50%;
background: #333;
color: #fff;
cursor: pointer;
}
这样写的好处是：在超宽屏上按钮离边缘更远，在手机上离边缘更近，视觉上的留白比例始终一致，不会出现大屏幕上按钮贴边、小屏幕上按钮孤零零悬在半空的情况。
垂直居中也是视口单位的强项。传统方案要么用绝对定位配合负margin，要么上flex布局。如果只是让一个弹窗相对视口居中，用vw、vh配合transform会更简洁：
.modal {
position: fixed;
left: 50vw; /* 视口宽度的一半 */
top: 50vh; /* 视口高度的一半 */
transform: translate(-50%, -50%);
padding: 4vmin; /* 内边距跟随视口短边缩放，大屏小屏观感一致 */
}
这里left和top用视口单位确定中心点，再用translate把元素自身的一半位移回来，实现真正的几何居中。padding用vmin是另一个小技巧：弹窗的内边距会跟随屏幕短边缩放，手机上不至于挤成一团，4K屏上也不会显得空旷。
字号自适应同样值得一试。用clamp()函数把视口单位包起来，可以让标题字号在一个合理的区间内流动：
h1 {
/* 最小24px，理想值随视口宽度流动，最大42px */
font-size: clamp(24px, 3.2vw, 42px);
}
clamp接收三个参数：最小值、理想值、最大值。视口很窄时字号不会缩到看不清，视口很宽时也不会无限放大，这比单纯写vw或者单纯写px都更稳，是目前主流的自适应排版写法。
典型场景实战：全屏区块与粘性底栏
全屏Hero区块是视口单位最经典的用武之地。想让首屏内容完整占满一屏，直接把高度设为100vh即可：
<section class="hero">
<h1>欢迎访问</h1>
<p>这个区块高度始终等于一屏</p>
</section>
<style>
.hero {
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: linear-gradient(135deg, #667eea, #764ba2);
color: #fff;
}
</style>
配合flex布局的居中能力，内部内容会始终在整屏中垂直水平居中，不管访客用的是笔记本还是投影仪，首屏体验都是完整的。
另一个实用场景是页面底部操作栏。移动端常见的「内容自适应高度、底部按钮栏固定」结构，可以这样实现：
.page {
min-height: 100vh; /* 页面至少占满一屏 */
padding-bottom: 12vh; /* 给底栏留出空间，随屏幕高度缩放 */
box-sizing: border-box;
}
.action-bar {
position: fixed;
left: 0;
right: 0;
bottom: 0;
height: 9vh; /* 底栏高度跟随视口高度 */
max-height: 72px; /* 防止横屏时底栏过高 */
min-height: 48px; /* 防止小屏时按钮点不中 */
display: flex;
align-items: center;
gap: 12px;
background: #fff;
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);
}
注意这里同时写了min-height和max-height做兜底，这是使用视口单位的良好习惯——极端比例的屏幕上纯视口单位可能产生过大或过小的值，加上上下限后布局就万无一失了。
移动端的坑：视口高度抖动问题
在手机浏览器上，地址栏会随滚动收起和展开，导致视口高度不断变化。如果页面用了100vh，就会出现滚动过程中高度跳动的问题，用户体验很差。针对这个问题，浏览器推出了新的动态视口单位：dvh、svh和lvh。
svh对应小视口，即地址栏展开时的高度；lvh对应大视口，即地址栏收起时的高度；dvh则是动态视口，会跟随地址栏状态实时变化。对全屏区块来说，通常推荐用100dvh替代100vh：
.hero {
height: 100vh; /* 老浏览器回退方案 */
height: 100dvh; /* 支持动态视口的浏览器使用 */
}
两行height叠写是标准的渐进增强写法：不认识dvh的浏览器会用前一行100vh，认识的浏览器会自动应用后一行。目前主流浏览器的较新版本都已支持dvh系列单位，移动端项目完全可以放心采用。
此外还要注意，视口单位不适合无节制地用在正文中。长段落文字如果字号完全跟随vw，在大屏上会大到夸张，小屏上又可能小到影响阅读。正确的做法是：正文用固定的rem或px保证可读性，标题、间距、装饰性元素才交给视口单位去流动，或者用clamp限定范围。理解了这套组合思路，视口单位就能真正成为响应式布局的得力工具。