SVG图标必须内联HTML，禁用img标签；PNG需提供@1x/@2x/@3x三套图并用srcset+x描述符；微信TabBar图标须为81×81透明PNG、小写命名、路径严格匹配。
直接用 img 标签加载 SVG 或 PNG 图标，再靠 CSS 加 width/height 缩放，一定会糊——这不是你 CSS 写得不够细，而是浏览器根本没按矢量逻辑渲染。
SVG 图标必须内联，不能用 <img src="icon.svg" alt="移动端底部Tabbar图标在不同分辨率下CSS如何防模糊？" >
浏览器把 <img alt="移动端底部Tabbar图标在不同分辨率下CSS如何防模糊？" > 里的 SVG 当位图处理：先按原始尺寸（比如 24×24）光栅化，再拉伸。加 width: 16px 只是缩放那个已模糊的像素块。
- 删掉所有
<img src="xxx.svg" alt="移动端底部Tabbar图标在不同分辨率下CSS如何防模糊？" >，把 SVG 源码直接贴进 HTML，例如<svg viewbox="0 0 24 24"><path d="..."></path></svg> -
viewBox属性必须保留，且不能带width/height属性 - 用 CSS 控制尺寸：
svg { width: 1.5em; height: 1.5em; }或svg { width: 24px; height: 24px; } - 避免在父容器设
font-size后用em，否则图标尺寸会随文本缩放失准；优先用px或rem
PNG 图标必须提供 @2x/@3x 并用 srcset + x 描述符
微信小程序原生 TabBar 要求 PNG 尺寸为 81×81 px（@1x），但真机显示靠的是物理像素。iPhone 14 的 DPR=3，若只给一张 81×81 图，会被强行放大 3 倍，必然发虚。
- 准备三套图：
home.png（81×81）、home@2x.png（162×162）、home@3x.png（243×243） -
srcset必须用x描述符：srcset="home.png 1x, home@2x.png 2x, home@3x.png 3x" - 别混用
w和x，例如srcset="home.png 1x, home@2x.png 162w"会导致浏览器忽略1x部分 -
src是 IE 兜底项，不能省略：src="home.png"
微信小程序原生 TabBar 图标路径和命名有硬约束
即使图源高清、srcset 正确，小程序编译阶段也可能静默失败——它对路径、命名、格式的要求比普通 Web 严格得多。
立即学习“前端免费学习笔记（深入）”；
- 图标必须是 PNG 格式，且背景透明（PNG-24），不能是 JPG 或带白底的 PNG
- 尺寸必须为 81×81 px（@1x），这是微信渲染引擎的基准采样尺寸；不是“建议”，是强制
- 命名只能含小写字母、数字、连字符，如
home.png、cart-active.png；禁止中文、下划线、大写、空格 -
app.json中iconPath指向未选中态，selectedIconPath指向选中态，两者必须成对存在且路径可访问 - Vite/Webpack 构建后，
srcset里的@2x.png路径不会被自动重写，需手动确认文件真实存在且大小写完全一致
background-image 加载 SVG 时，background-size 不能写 100% 100%
很多人把 SVG 当普通图片扔进 background-image，却忘了它默认不缩放适配容器，结果只显示左上角一小块，或被拉伸失真。
- 必须显式声明
background-repeat: no-repeat -
background-size要匹配设计稿原始宽高，例如图标本应占 24×24 CSS 像素，就写background-size: 24px 24px - 禁用
cover、contain或100% 100%——它们会让 SVG 被二次插值，矢量优势归零 - 高 DPR 设备需配合媒体查询切换：
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) { background-image: url("icon@2x.svg"); }
最容易被忽略的点是：父容器若有 transform: scale()、flex 布局偏差或 zoom，会干扰图标实际渲染像素对齐。真机测试前，务必关掉开发者工具的“设备模拟”，直接用 Safari/微信原生 WebView 查看 Network 面板里加载的是哪张图。
