CSS视口单位

视口单位相对于浏览器可视区域大小，无需媒体查询即可实现响应式效果。

单位说明

单位	含义	基准
`vw`	视口宽度	1vw = 视口宽度的 1%
`vh`	视口高度	1vh = 视口高度的 1%
`vmin`	视口较小值	取 vw 和 vh 中的较小值
`vmax`	视口较大值	取 vw 和 vh 中的较大值

基本用法

全屏布局

CSS

.fullscreen {
  width: 100vw;
  height: 100vh;
}

/* 等比例缩放的正方形 */
.square {
  width: 50vmin;
  height: 50vmin;
}

响应式字体

CSS

.title {
  /* 字体随视口缩放 */
  font-size: 5vw;
}

/* 结合固定单位，设置最小最大值 */
.text {
  font-size: clamp(14px, 2vw, 24px);
}

居中定位

CSS

.centered {
  position: absolute;
  top: 50vh;
  left: 50vw;
  transform: translate(-50%, -50%);
}

实际场景

全屏轮播图

CSS

.slide {
  width: 100vw;
  height: 100vh;
  object-fit: cover;
}

视口比例容器

CSS

/* 16:9 比例视频容器 */
.video-container {
  width: 100%;
  height: calc(100vw * 9 / 16);
}

/* 或使用 aspect-ratio */
.video-container {
  width: 100%;
  aspect-ratio: 16 / 9;
}

移动端底部安全区

CSS

.footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  padding-bottom: env(safe-area-inset-bottom);
}

注意：移动端浏览器中，100vh 可能包含地址栏高度，导致实际显示超出可视区域。

要点总结

vw/vh 相对于视口宽高，vmin/vmax 取较小/较大值
配合 clamp() 可设置响应式字体的上下限
注意移动端 100vh 的地址栏问题
适合全屏布局、响应式字体、比例容器等场景

📝 发现内容有误？点击此处直接编辑