只写srcset="icon@2x.png 2x"不生效，因缺失src fallback、误加sizes属性、设备dpr≠2；正确写法需src指向1x图，srcset按顺序写1x/2x/3x且仅用x单位，图片像素尺寸须严格对应。
只写 srcset="icon@2x.png 2x" 为什么经常不生效
因为浏览器根本不会单独靠 2x 就加载高分图——它必须有明确的 fallback 和匹配条件。最简写法看似省事，实则漏掉三个硬性前提：src 必须存在、不能带 sizes、设备 DPR 必须恰好为 2。常见现象是 iPhone 上仍加载 1x 图，根源往往是：你加了 sizes（哪怕只是空字符串），或 src 指向的是 2x 图（导致 DPR=1 时也拉大图），或构建后 icon@2x.png 实际 404。
srcset 里写 1x/2x 的真实匹配逻辑
浏览器不是“看到 2x 就选”，而是查当前 window.devicePixelRatio 值，然后从左到右找第一个 ≥ 该值的描述符。所以顺序很重要：
-
srcset="logo.png 1x, logo@2x.png 2x, logo@3x.png 3x"✅ 正确：DPR=2 选中间项，DPR=3 选最后一项 -
srcset="logo@3x.png 3x, logo@2x.png 2x"❌ 错误：DPR=2 时仍会选 3x 项（因为从左匹配，3x ≥ 2） -
srcset="logo.png 1x, logo@2x.png 2x"+sizes="100vw"→ 整个srcset被忽略，浏览器切到宽度匹配模式，2x彻底失效
固定尺寸图标用 1x/2x 的完整写法
适用场景：CSS 明确设定了宽高，比如 width: 24px; height: 24px;。此时图片渲染尺寸恒定，x 描述符才可靠：
-
src必须指向 1x 图（既是 fallback，也是 DPR=1 时的主图） - 所有
srcset条目必须只用x单位，不能混w - 图片实际像素尺寸必须严格对应：24×24 的
1x图，对应 48×48 的@2x图，不能是 50×50 - 示例：
<img src="icon.png" srcset="icon.png 1x, icon@2x.png 2x, icon@3x.png 3x" alt="设置">
为什么加了 srcset 还是模糊
高分屏适配从来不只是 srcset 的事。如果页面里有 <canvas></canvas> 或 SVG 绘图，window.devicePixelRatio 必须参与缩放计算，否则再高清的 @2x.png 也救不了 canvas 线条的模糊。另外，srcset 只解决图片源选择，不控制渲染尺寸——CSS 里的 width/height 写死像素值，但没配合 image-rendering: -webkit-optimize-contrast 等提示，也可能让浏览器插值失真。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
