不能靠同时设 width: 50vw 和 height: 50vh 保持元素比例，因 vw/vh 分别锚定独立变化的视口宽高，设备宽高比差异（如 iphone 14 pro max 的 1:2.25 与 ipad mini 的 3:4）导致同一代码渲染出不同宽高比，引发拉伸或压扁；应改用 vmin/vmax 控制等比缩放，并用 dvh 应对键盘弹出问题。
不能靠同时设 width: 50vw 和 height: 50vh 来保持元素比例——这会因设备宽高比差异直接导致变形。
为什么混用 vw 和 vh 会让元素拉伸或压扁
vw 基于视口宽度，vh 基于视口高度，二者独立变化。同一套 width: 80vw; height: 80vh; 在 iPhone 14 Pro Max（宽高比 ≈ 1:2.25）和 iPad mini（宽高比 ≈ 3:4）上渲染出的实际宽高比完全不同。
- 常见错误现象：
img被拉伸、按钮高度突兀、轮播图裁剪不一致、文字行高错位 - 根本原因：你没在控制“比例”，而是在分别锚定两个不相关的尺寸轴
- 真正需要的是“以视口较短边为基准”或“以较长边为上限”，而非宽高各自缩放
用 vmin 和 vmax 替代 vw/vh 控制固定比例
当你要一个正方形图标容器、圆形头像、或等比缩放的卡片时，vmin 和 vmax 才是安全选择。
-
width: 20vmin; height: 20vmin;→ 总是正方形，边长 = 视口宽高中较小值的 20% -
width: 80vmax; height: 80vmax;→ 总是正方形，边长 = 视口宽高中较大值的 80% - 若需 16:9 容器，可用
aspect-ratio: 16/9+width: 90vmin，避免手动算高 - 注意：
vmin/vmax不受键盘弹出影响，比vh更稳定
移动端键盘弹出时 vh 失效，该用 dvh 还是降级处理
iOS Safari 和部分安卓浏览器中，软键盘弹出会缩小 visual viewport，但 100vh 仍按 layout viewport 计算，导致内容被遮挡或底部留白。
- 优先写
height: 100dvh;——dvh（dynamic viewport height）动态响应键盘、地址栏收起等变化 - 兼容旧环境：用
@supports not (height: 100dvh)包裹 fallback，例如回退到100vh+ JS 监听resize微调 - 别给
html或body设height: 100vh，易触发 iOS 滚动异常；改用 wrapper div +min-height: 100dvh - 微信 X5 内核（截至 2026 年 6 月）仍不支持
dvh，必须降级
图片和字体用 vw/vh 时容易失控，必须加约束
直接写 font-size: 4vw 或 img { width: 90vw; height: 50vh; } 看似灵活，实则在超宽屏或小屏下极易崩溃。
- 字体必须用
clamp()：例如font-size: clamp(14px, 2.5vw + 0.5rem, 18px);，三值缺一不可 - 图片宽高比不匹配时，
height: auto比硬设vh更安全；若需等比缩放，优先用aspect-ratio+width: 80vmin - 父容器的
max-width会覆盖vw效果，检查 computed 样式确认最终生效值来源 - PostCSS 插件（如
postcss-pxtoviewport）可将设计稿 px 自动转为 vw，但需配置viewportWidth（通常为 375）
最常被忽略的点是：vw/vh 是纯尺寸单位，不带语义也不保比例；真正决定 UI 是否稳定的，是你是否主动约束了极端场景下的最小/最大值，以及是否绕开了 viewport 高度在移动端的动态陷阱。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
