移动端用vw/vh实现整体缩放的前提是设置viewport为width=device-width、initial-scale=1.0，否则vw基于默认980px错误视口计算导致失真；以750px设计稿为例，1vw=7.5px，配合clamp()、dvh、vmin及rem混合使用可提升适配健壮性。
移动端用视口单位（vw/vh）实现整体缩放，核心是让所有尺寸都按视口比例动态变化，不需要 JS 计算，但前提是 viewport 必须配对——否则所有 vw 值都基于错误的 980px 布局视口，缩放会完全失真。
viewport 是前提，不是可选项
必须在 <head> 中写入：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
这行代码让浏览器启用“理想视口”，即布局宽度 = 设备逻辑像素宽度（如 iPhone 15 是 393px，不是物理像素）。不加它，页面默认按 980px 渲染再缩小，vw 单位也会按这个错误基准计算，结果文字极小、按钮难点、横向滚动条意外出现。
其他参数如 maximum-scale=1.0 或 user-scalable=no 已不推荐强依赖：iOS 16+ 会忽略 user-scalable，且禁用缩放违反可访问性规范。initial-scale=1.0 不可省略，它是触发理想视口的开关，缺了它，有些安卓 WebView 仍会自动缩放。
用 vw 实现等比缩放的基准换算
以主流设计稿宽度 750px 为例，1rem = 75px 是旧 REM 常用换算；而用 vw，直接建立视口与设计稿的映射关系：
- 视口宽度为 100vw → 对应设计稿 750px → 所以 1vw = 750px ÷ 100 = 7.5px
- 设计稿中一个 150px 宽的按钮 → 写成 width: 20vw（150 ÷ 7.5 = 20）
- 设计稿中一个 32px 字体 → 写成 font-size: 4.2666vw（32 ÷ 7.5 ≈ 4.2666），但建议四舍五入到小数点后 3 位或使用 calc() 控制精度
这种换算只需做一次，之后所有尺寸都按此比例推导，无需媒体查询断点。
避免极端尺寸下的失控问题
纯 vw 缩放在小屏（如 320px）下字体可能过小，在大屏（如 iPad Pro 1024px）下又可能过大。解决方法不是放弃 vw，而是加一层限制：
- 用 clamp() 设置字号范围：例如 font-size: clamp(14px, 4vw, 20px)，保证最小 14px、最大 20px，中间随视口平滑过渡
- 高度慎用 100vh：它包含地址栏等浏览器 UI，滚动时内容会跳动；改用 dvh（dynamic viewport height）更可靠，现代 iOS/Android 已支持
- 全宽容器别只写 width: 100vw：它可能超出内容区引发横向滚动；优先用 width: 100%，或配合 calc(100vw - 1px) 微调
和 rem 搭配使用更稳妥
纯 vw 方案在超小屏或超大屏下易失衡，纯 rem 又依赖 JS。折中方案是用 CSS 原生能力混合：
- 根字体设为 font-size: calc(16px + 0.25vw)，基础保底 16px，再随视口微调
- 正文用 rem（保障可读性与可访问性），按钮/图标等装饰性元素用 vw（强调视觉比例）
- 关键布局区域（如轮播图容器）用 vmin：例如 width: 90vmin; height: 90vmin;，确保横竖屏下都保持正方形比例
这样既保留 vw 的流体性，又通过 rem 和函数式单位兜底，适配更健壮。
