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 模拟。
