多端图标适配方案：应对不同设备的图标显示问题

做前端开发或者UI设计时，经常遇到一个头疼的问题：同一个图标，在手机上看清楚，放到电脑上就模糊；或者在高清屏上发虚，低分屏上又太小。这其实就是多端图标适配没处理好。

为什么图标会“变样”？

不同设备的屏幕分辨率、像素密度（DPR）、操作系统渲染方式都不一样。比如 iPhone 的 Retina 屏，1个CSS像素对应4个物理像素。如果图标用的是普通PNG，没有提供2x或3x版本，系统就会拉伸图片，结果就是模糊。

另外，安卓和iOS对SVG的支持程度也略有差异，有些老机型甚至不支持矢量图标。这就要求我们不能只靠一种方案走天下。

方案一：多倍图 + 响应式切图

准备 @1x、@2x、@3x 三套PNG/SVG 图标，通过CSS媒体查询或HTML的srcset属性自动加载合适尺寸。

<img src="icon.png" srcset="icon@2x.png 2x, icon@3x.png 3x" alt="图标">

这种方式兼容性好，适合对视觉精度要求高的场景，比如App启动图标。缺点是资源体积大，管理麻烦。

方案二：使用SVG矢量图标

SVG是矢量格式，缩放不会失真，文件体积小，还能通过CSS控制颜色、大小。特别适合按钮、导航栏这类需要频繁复用的图标。

<svg class="icon" aria-hidden="true">
  <use xlink:href="#icon-home"></use>
</svg>

可以配合Symbol方式构建图标库，页面只需引入一次雪碧图，其他地方直接调用。现代浏览器基本都支持，但在部分低端安卓机上可能有渲染延迟。

方案三：字体图标（Iconfont）

把图标做成字体文件，像文字一样使用。好处是兼容性强，支持老版本浏览器，也能用CSS设置颜色和阴影。

.icon-home::before {
  font-family: 'iconfont';
  content: '\e601';
}

但字体图标只能是单色，复杂图形表现力差，而且加载字体有闪动风险，现在用得越来越少了。

我们最近做的一个电商H5项目，覆盖iOS、安卓、PC三端。最终采用的策略是：

同时在构建流程中加入自动化脚本，设计师导出SVG后，自动转成Symbol并生成对应CSS类名，减少人工出错。

图标对齐问题很常见。比如在按钮里，图标看起来总比文字低一点。这是因为SVG默认按基线对齐，加上 vertical-align: middle 或使用 flex 布局能解决。

还有色彩适配。深色模式下，白色图标没问题，但浅色图标在暗背景上就看不清。可以在CSS中用 prefers-color-scheme 检测系统主题，动态切换图标颜色或使用mask遮罩方案。