优先用 srcset + sizes 处理 ，用 @media 媒体查询兜底 background-image；image-set() 兼容性差、路径易出错，不建议作为主力方案。
直接结论：优先用 srcset + sizes 处理 <img>，用 @media 媒体查询兜底 background-image；image-set() 看似优雅但兼容性差、路径易出错，不建议作为主力方案。
为什么 image-set() 经常没效果
根本不是语法写错，而是三个硬性前提同时满足才可能生效：
-
image-set()只对background-image生效，对<img>标签完全无效 - Safari 9+、Chrome 39+、Edge 16+ 支持，Firefox 直到 2025 年底仍需写
-webkit-image-set()，IE 全系不支持 - 构建工具（如 Vite）默认不解析
image-set()中的路径，"logo@2x.png"若未真实输出到dist/目录，404 后 fallback 到 1x 图，看起来还是糊 - 必须显式声明
background-size，且值要按设计稿逻辑尺寸设（如图标本应显示为24px，就写background-size: 24px 24px），否则高清图加载后仍被拉伸
用 srcset + sizes 正确加载 <img> 的两倍图
这是目前最可靠、无需 JS、原生支持、SEO 友好的方案，适用于所有需要语义化图片的场景：
-
srcset必须用x描述符（"icon-24.png" 1x, "icon-48.png" 2x），不能混用w（"icon-24.png" 24w对 DPR 切换无效） -
sizes不可省略：浏览器靠它算出“这张图该以多少 CSS 像素渲染”，再结合devicePixelRatio选物理尺寸最匹配的图。例如：sizes="(max-width: 768px) 100vw, 800px" -
src是降级兜底项，IE 全系不支持srcset时才用它，所以必须保证src指向一张可用的 1x 图 - 文件物理尺寸必须严格匹配描述符：2x 图必须是 1x 图宽高的 2 倍（如 24px → 48px），不能靠 CSS 缩放“假装”高清
用媒体查询安全适配 background-image
当图标/背景图必须走 CSS（如伪元素、按钮背景、雪碧图）时，@media 是兼容性最好、行为最可控的方式：
- 基础规则写 1x 图，放在最前面：
background-image: url("icon-24.png"); background-size: 24px 24px; - 2x 规则用
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx)包裹，避免用192dpi（单位换算易错，部分 Android 浏览器不识别） - 2x 图路径必须和 1x 图一一对应，仅文件名差异（如
icon-24.png→icon-48.png或icon-24@2x.png） -
background-size必须显式设为逻辑像素尺寸（如24px 24px），否则高 DPR 下会把 48px 图按 48px 渲染，导致图标放大一倍
容易被忽略的渲染陷阱
即使你正确写了 srcset 或媒体查询，以下情况仍会导致模糊：
-
<img>标签没设width/height属性，或 CSS 中没设固定尺寸，导致布局偏移（layout shift）后浏览器重算渲染尺寸，选错图 - SVG 图标本身无损，但若用
background-image: url("icon.svg")且没加background-size，在旧 Android WebView 中可能被当作位图拉伸 - 雪碧图（CSS Sprites）用 2x 版本时，
background-size要按比例缩放（如 4 图横排 →background-size: 400%），不能简单写50% - 本地开发用
file://协议时，部分浏览器（如 Chrome）会禁用srcset的 DPR 切换，必须起本地服务测试
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
