image-set() 是 CSS 原生多倍图方案，仅支持 background-image 且兼容性差（Safari 16.4+ 稳定、Chrome 限 background-image、Firefox 完全不支持）；推荐用媒体查询 + background-image 兼容所有浏览器，并配合 background-size 控制尺寸；img 标签须用 srcset/sizes 实现响应式。
用 image-set() 直接适配多倍图，但浏览器支持有限
image-set() 是 CSS 原生方案，语法简洁，能按设备像素比（dpr）自动选图。但它在 Safari 16.4+ 才开始稳定支持，Chrome 虽支持但仅限于 background-image，且不支持 fallback 图像（即不支持降级到普通 url()）。
常见写法：
div {
background-image: image-set(
url(icon.png) 1x,
url(icon@2x.png) 2x,
url(icon@3x.png) 3x
);
}
- 必须写全
1x、2x等描述符，不能省略1x，否则部分浏览器（如旧版 Safari）会直接忽略整条声明 - 路径中的
@2x是命名惯例，不是语法要求；但若文件名含空格或特殊字符，需用引号包裹url("icon 2x.png") - 不支持
src属性（即不能用于<img>标签），只适用于background-image - Firefox 目前完全不支持
image-set()（截至 v128），用它等于放弃 Firefox 用户
媒体查询 + background-image 是最稳妥的兼容方案
用 @media (-webkit-min-device-pixel-ratio: 2) 或标准写法 @media (min-resolution: 192dpi) 分别设置不同 background-image，覆盖所有主流浏览器，包括 IE11（仅支持 -webkit-min-device-pixel-ratio 的旧写法）。
推荐写法（兼顾标准与兼容）：
立即学习“前端免费学习笔记（深入）”；
div {
background-image: url(icon.png);
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
div {
background-image: url(icon@2x.png);
background-size: contain;
}
}
@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 288dpi) {
div {
background-image: url(icon@3x.png);
}
}
-
background-size: contain或cover必须显式设置，否则@2x图会被拉伸成两倍宽高，看起来反而模糊 - 不要混用
min-resolution和device-pixel-ratio在同一规则里——它们触发条件不完全等价，可能导致某些 Android 设备漏匹配 - 如果元素尺寸固定（比如
width: 24px; height: 24px;），@2x图应为48×48px，并配background-size: 24px 24px，比contain更精准
HTML 中用 srcset 和 sizes 处理响应式图片（非背景图）
对 <img> 标签，CSS 无能为力，必须用 HTML 原生属性：srcset 按像素密度提供候选图，sizes 告诉浏览器该图在页面中的渲染宽度，让浏览器选最合适的资源。
典型用法：
<img src="icon.png" srcset="icon.png 1x, icon@2x.png 2x, icon@3x.png 3x" alt="icon">
-
src是必填 fallback，当浏览器不支持srcset（如 IE）时会回退至此 - 不要写成
srcset="icon@2x.png 2x"单独一项——没有1xfallback 时，部分 iOS Safari 会加载失败 - 若图片宽度随视口变化（如全宽 banner），必须加
sizes，例如sizes="(max-width: 768px) 100vw, 50vw"，否则浏览器默认按 100vw 计算，可能选错分辨率 -
srcset中的1x/2x是设备像素比，不是物理像素值，和屏幕实际 DPI 无关，只和window.devicePixelRatio对齐
容易被忽略的关键点：缩放逻辑和设计稿基准
设计师给的“2x 切图”本质是按 2 倍物理像素绘制，但前端渲染时，CSS 像素仍是逻辑单位。一张 48×48px 的 @2x 图，在 CSS 中设为 width: 24px; height: 24px; 才正确——否则它会以物理像素铺满，导致元素尺寸翻倍。
- 切图命名建议统一用
@2x后缀，避免用2x或retina等不规范写法，防止构建工具误处理 - Webpack/Vite 中若用
url-loader或asset模式，需确认是否对@2x文件做了单独哈希，否则缓存更新可能出问题 - iOS 上部分老机型（如 iPhone 6）报告
dpr=2但实际渲染有 subpixel 模糊，此时强制用@3x图反而更清晰——这不是 bug，是渲染管线差异，需真机验证
