移动端H5矢量缩放核心是统一逻辑宽度基准（如375px/750px设计稿）并动态响应dpr：通过viewport scale=1/dpr或rem font-size×dpr实现布局等比缩放，用vw/rem替代px，配合SVG/iconfont及@2x/@3x图片和字体最小阈值保障清晰可读。
移动端 H5 实现不同 DPI 下的矢量缩放，核心不是“让页面像素变多”，而是让 CSS 布局单位（如 rem、vw）或视口缩放比例，能随设备物理像素密度（DPI/dpr）动态响应，从而保持视觉一致性和清晰度。关键在于：**统一逻辑宽度基准 + 动态匹配设备渲染能力**。
统一以固定设计稿宽度为逻辑基准
主流做法是将 UI 设计稿宽度（如 375px、750px）作为页面的“逻辑宽度”。所有 CSS 尺寸（宽高、边距、字体）都按此基准等比换算。例如：
- 设计稿中一个按钮宽 100px（基于 750px 宽），在代码中写成 100 / 750 = 13.33vw 或配合 rem 换算为对应值；
- 不直接写
width: 100px，避免在高 DPI 屏幕上被物理像素“撑糊”或“缩太小”； - 这个逻辑宽度不随屏幕物理尺寸变化，只用于建立可计算的比例关系。
用 dpr 控制 viewport 缩放或根字体大小
设备像素比（dpr）决定了 1 个 CSS 像素对应多少物理像素。iOS 和 Android 高端机常见 dpr=2 或 3，低端机可能为 1。适配需主动读取并响应它：
- 通过
window.devicePixelRatio获取当前 dpr； - 若采用 viewport 缩放方案：计算
scale = 1 / dpr，再设置initial-scale，使 1 个 CSS 像素恰好覆盖 1 个设备独立像素（即“矢量缩放”的底层支撑）； - 若采用 rem 方案：动态设置
html { font-size: basePx * dpr }（如 basePx=16），让 1rem 在不同 dpr 下始终代表相同物理尺寸； - 注意：Android 的
target-densitydpi已废弃，现代方案应避开该属性，专注 dpr + scale 或 rem。
用 rem 或 vw 替代 px 实现真正矢量布局
px 是绝对单位，在高 DPI 下不会自动放大，容易导致文字过小、点击区域过窄。而 rem/vw 是相对单位，可随根元素或视口变化而缩放：
-
rem：基于
html的font-size。只要动态调整根字号（如根据屏幕宽度或 dpr），整个页面就能等比缩放； - vw：1vw = 视口宽度的 1%，天然响应屏幕变化，适合全屏类布局（如 banner、弹窗）；
- 慎用
zoom或transform: scale()：它们仅做渲染层拉伸，不改变布局盒模型，易引发点击偏移、文字锯齿、表单失焦等问题，不属于“矢量缩放”范畴。
兼顾高清图与文本可读性
矢量缩放解决的是布局和 UI 元素的清晰缩放，但图片和字体仍需单独处理：
- 图标优先用 iconfont 或 SVG，天然矢量、无损缩放；
- 位图（如 banner 图）提供 @2x/@3x 版本，用
srcset或background-image+image-set()按 dpr 加载； - 字体大小不宜完全跟随缩放（如 12px 缩到 6px 就不可读），建议设最小阈值（如
min-font-size: 14px）或用clamp()限定范围。
