css 使用视口单位与百分比_调整布局适应不同屏幕

vw/vh 相对于视口，% 相对于父容器；全屏高度用 100vh 而非 100%，字号适配需 clamp(1.25rem, 4vw, 2.5rem)，flex/Grid 中优先用 fr 而非 %，避免滚动条导致的 100vw 溢出。

视口单位（vw/vh）和百分比在响应式布局中根本不是一回事

很多人以为 % 和 vw/vh 都是“相对单位”，可以混用或互换，结果布局在不同设备上错位、溢出、文字过小。关键区别在于：百分比是相对于父容器的尺寸计算，而 vw/vh 是相对于整个视口（viewport）宽高的 1%，完全不看父级有没有设置 width 或 height。

比如一个 div 父元素没设 height，子元素写 height: 50% → 实际为 0px；但写 height: 50vh → 永远是视口高度的一半，哪怕父元素塌陷。

什么时候该用 vw，什么时候必须用 %

选错单位会导致响应逻辑失效。真实项目里常见误用场景：

• 全屏轮播图高度写成 height: 100% → 在嵌套多层、父高未显式定义时失效，应改用 height: 100vh
• 字体大小适配手机屏幕，用 font-size: 4% → 相对于父容器 font-size，毫无意义；正确做法是 font-size: 4vw（需配合 clamp() 防止过大/过小）
• 侧边栏宽度想随容器缩放，却用了 width: 20vw → 它会随屏幕变宽而变宽，脱离内容区约束；此时应坚持用 width: 20% 或 flex-basis

vw 做响应式字号要加 clamp()，否则 ios safari 会炸

iOS Safari 对小屏下 vw 字体极其敏感：iphone SE（375px 宽）上 font-size: 4vw = 15px，尚可；但横屏后变成 667 × 4% ≈ 26.7px，字大得撑破行高。android chrome 同样存在类似问题。

立即学习“前端免费学习笔记（深入）”；

安全写法是用 clamp() 锁定区间：

h1 {   font-size: clamp(1.25rem, 4vw, 2.5rem); }

含义：最小 1.25rem，理想值 4vw，最大不超过 2.5rem。注意三点：

• clamp() 兼容性已覆盖 Chrome 88+、firefox 79+、Safari 14.1+；旧版需降级为 font-size: 1.5rem + 媒体查询
• 不要写 clamp(1rem, 2vw, 1rem) —— 最小值等于最大值，浏览器可能忽略中间值
• vw 基准是视口宽度，若页面有垂直滚动条（占约 17px），100vw 会略大于可见区域，导致轻微横向滚动；可用 100dvw 替代（d 表示“dynamic”，排除滚动条）

百分比在 Flex/Grid 布局里容易被忽略的继承陷阱

当父容器是 display: flex，子项设 width: 50%，并不总等于“占一半”：

• 如果父容器设置了 flex-wrap: wrap 且子项内容超长，% 宽度可能被弹性算法压缩
• Grid 中列定义用 grid-template-columns: 50% 50% → 实际行为不可靠，推荐改用 1fr 1fr 或 repeat(2, 1fr)
• max-width: 80% 在移动端可能不如 max-width: 480px 稳定 —— 因为某些安卓 webview 对百分比解析异常，尤其在 position: fixed 元素内

真正需要“随父缩放”的场景（如卡片内图片宽度），优先用 width: 100% + height: auto，而不是试图用 vw 模拟。