css `svh` 单位

昔人'2025-12-04 10:13

svh 是css中的一个视口相对单位。表示小视口高度（small viewport height。）, 他为了解决移动设备上浏览器窗口尺寸变化的问题引入的单位。

小视口指的是浏览器界面最小时的视口尺寸
在移动设备上，当地址栏、工具栏等浏览器UI元素完全展开时，此时的视口高度就是小视口高度
与 dvh（动态视口高度）和 lvh（大视口高度）形成对比

单位	全称	描述	适用场景
svh	Small Viewport Height	浏览器UI最大时的视口高度	保证内容始终可见
lvh	Large Viewport Height	浏览器UI最小时的视口高度	全屏体验
dvh	Dynamic Viewport Height	动态变化的视口高度	响应UI变化

css 复制代码

/* 元素高度始终为小视口高度的100% */
.full-height {
  height: 100svh;
}

/* 响应式设计中的使用 */
.container {
  /* 最小高度为小视口高度 */
  min-height: 100svh;
  
  /* 回退方案 */
  min-height: 100vh;
}

使用场景

响应式设计中，保证内容始终可见

css 复制代码

/* 确保按钮始终在可视区域内 */
.cta-button {
  position: fixed;
  bottom: 20px;
  /* 使用svh确保即使在地址栏展开时也能看到 */
  max-height: calc(100svh - 100px);
}

全屏体验

css 复制代码

.hero-section {
  /* 使用svh而不是vh，避免地址栏遮挡 */
  height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1rem;
}

CSS自定义属性结合使用

css 复制代码

:root {
  --svh: 100svh;
  --safe-area: env(safe-area-inset-bottom, 0px);
}

.container {
  height: calc(var(--svh) - var(--safe-area));
}

JavaScript获取小视口尺寸

javascript 复制代码

// 获取小视口高度
const smallViewportHeight = window.visualViewport?.height ||  Math.min(window.innerHeight, window.outerHeight);

// 设置为CSS自定义属性
document.documentElement.style.setProperty('--svh', `${smallViewportHeight}px`);

注意事项

性能考虑：与 dvh 不同，svh 值不会随UI变化而改变，性能更好

内容截断风险：使用 svh 时，如果内容过多可能被截断，需要配合 overflow