移动端底部图标雪碧图适配需用rem+background-size实现等比缩放，并为高清屏提供@2x图配合媒体查询切换，同时注意缓存更新、精准定位及格式限制。
移动端底部图标的雪碧图（Sprite）适配，核心是解决两个问题：一是图标在不同屏幕尺寸和像素比（DPR）下清晰不模糊，二是定位精准、缩放一致、请求高效。不能简单照搬 PC 端的 px 定位，也不能放弃 Sprite 的 HTTP 请求优化优势。
用 rem + background-size 实现等比缩放
视觉稿通常以 640px 或 750px 为基准，切出的 Sprite 图是固定尺寸（如 1072×442px）。直接写 px 定位无法适配各种屏幕，需转为 rem 单位，并配合 background-size 按比例缩放整张图：
- 先按视觉稿宽度（如 640px）计算 rem 基准：1rem = 10px → 640px = 64rem
- 将原始 Sprite 尺寸换算为 rem：1072px → 10.72rem，442px → 4.42rem
- CSS 中设置 background-size: 10.72rem 4.42rem，让整张图随容器等比缩放
- 每个 icon 元素的宽高、background-position 全部用 rem 表示（如 -1.88rem -0.05rem），确保缩放后定位依然准确
高清屏（DPR≥2）下保持清晰的关键
仅靠 rem 缩放还不够——若 Sprite 图本身是 1x 分辨率，在 DPR=2 的设备上会拉伸模糊。必须提供双倍精度图并压缩显示：
- 准备两版 Sprite：1x 图（如 icon-sprite.png）和 2x 图（icon-sprite@2x.png），后者所有图标尺寸翻倍，但布局结构完全一致
- 用媒体查询区分设备像素比：@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)
- 在高清屏规则中，替换 background-image 为 @2x 图，并将 background-size 设为原图物理尺寸的一半（即视觉尺寸还原）
- 例如：1x 图 1072×442px → background-size: 10.72rem 4.42rem；2x 图 2144×884px → background-size: 10.72rem 4.42rem（自动压缩为一半显示）
避免常见坑：缓存、定位、格式
Sprite 在 H5 中容易因细节疏忽导致线上失效或显示异常：
- 缓存更新失效：Sprite 文件上线后缓存周期长，必须加 contenthash（如 icon-sprite.a1b2c3d4.png），否则改图不生效
- 定位不准：不要用 margin/padding 微调图标位置，所有偏移必须由 background-position 精确到 rem（推荐工具：Sprite Cow 或 webpack-spritesmith 自动生成）
- 格式限制：WebP 不支持 Sprite，必须用 PNG 或 GIF；若需 WebP 压缩优势，应放弃 Sprite，改用 srcset + picture 加载单图
- viewport 是前提：没有正确设置 ，所有 rem 和 media 查询都会失效
为什么不直接用 srcset 替代 Sprite？
底部图标类资源高度适合 Sprite：尺寸固定、数量集中（通常 5–8 个）、变化极少。用 srcset 加载 8 个独立图标，在 Android 4.4–6.0 WebView 下会触发 8 次 HTTP/1.1 请求排队，实测首屏白屏增加 300–800ms。而 Sprite 合并为 1 次请求，性能提升显著且兼容性更好——只要处理好缩放与清晰度，它仍是 H5 底部导航最稳妥的方案。
