CSS中vh和vw单位使用方法详解

偷偷努力，悄无声息地变强，然后惊艳所有人！哈哈，小伙伴们又来学习啦~今天我将给大家介绍《CSS中使用vh和vw单位控制元素尺寸的方法如下：vh（视口高度）：1vh等于视口高度的1%。例如，如果视口高度为1000px，则1vh = 10px。vw（视口宽度）：1vw等于视口宽度的1%。例如，如果视口宽度为1600px，则1vw = 16px。应用示例：.box { width: 50vw; /* 宽度为视口宽度的50% */ height: 30vh; /* 高度为视口高度的30% */ }响应式设计：通过vh和vw可以实现元素尺寸随屏幕大小变化，适用于全屏布局或自适应设计。注意事项：vh和vw基于视口大小，与内容无关。在移动设备上需注意视口缩放对单位的影响。通过合理使用vh和vw，可以更灵活地控制元素尺寸，提升页面的响应式表现。》，这篇文章主要会讲到等等知识点，不知道大家对其都有多少了解，下面我们就一起来看一吧！当然，非常希望大家能多多评论，给出合理的建议，我们一起学习，一起进步！

vh和vw是视口单位，1vh等于视口高度的1%，1vw等于宽度的1%。常用于全屏布局（如height: 100vh）、响应式字体（font-size: 5vw）和弹性容器（width: 90vw; max-width: 1200px）。适配移动端时需注意iOS Safari工具栏导致的100vh异常，建议用100dvh替代；避免在多行文本等场景过度使用，应结合max/min属性控制极端情况，确保布局稳定。

使用 CSS 的 vh 和 vw 单位可以轻松让元素尺寸相对于视口大小进行响应式调整，特别适合移动端或全屏布局设计。下面介绍它们的含义和实际用法。

理解 vh 与 vw 的基本概念

vh（viewport height）表示视口高度的百分比，1vh 等于视口高度的 1%。例如，如果屏幕高度是 1000px，那么 1vh 就是 10px。
vw（viewport width）同理，表示视口宽度的 1%，100vw 就等于当前屏幕的完整宽度。

常见场景：

• 设置一个全屏背景：height: 100vh;
• 让文字随屏幕宽度缩放：font-size: 4vw;
• 创建响应式容器：width: 80vw; margin: 0 auto;

控制元素尺寸的实际应用

利用 vh 和 vw 可以避免依赖固定像素值，使页面更灵活适应不同设备。

示例 1：全屏展示区域

section.full {
  height: 100vh;
  width: 100vw;
  background: #000;
  color: #fff;
}

这段代码会让元素占满整个视口，常用于首页横幅或引导页。

示例 2：响应式字体大小

h1.responsive {
  font-size: 5vw;
}

当用户在手机上浏览时，字体自动变小；在大屏幕上则放大，保持视觉比例协调。

示例 3：限制最大宽度并居中容器

.container {
  width: 90vw;
  max-width: 1200px;
  margin: 0 auto;
}

既保证在小屏幕上留有边距，又在大屏幕上不会无限拉伸，提升可读性。

注意事项与兼容性提示

虽然现代浏览器普遍支持 vh/vw，但仍需注意以下几点：

• iOS Safari 中的工具栏会影响实际视口高度，导致 100vh 超出可视范围，建议用 JavaScript 动态计算或改用 100dvh（动态视口单位）
• 避免在需要精确布局的地方过度依赖 vw/vh，比如多行文本容器可能因字号变化而错位
• 结合 min-width、max-height 等限制属性，防止极端情况下的显示异常

基本上就这些。合理使用 vh 和 vw 能大幅提升响应式体验，关键是根据内容需求设定合理的范围和兜底样式。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《CSS中vh和vw单位使用方法详解》文章吧，也可关注golang学习网公众号了解相关技术文章。