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 可以避免依赖固定像素值，使页面更灵活适应不同设备。
立即学习“前端免费学习笔记（深入）”；
Pic Copilot
AI时代的顶级电商设计师，轻松打造爆款产品图片
158 查看详情 示例 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单位控制元素尺寸的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1046958.html
微信扫一扫 
支付宝扫一扫 
