关键是要用 srcset="photo.jpg 1x, photo@2x.jpg 2x" 配合 devicePixelRatio 自动匹配，不写 sizes，保留 src 降级，CSS 控制宽高防模糊。
要在高分辨率屏幕（如 Retina、DPR ≥ 2）下让浏览器自动加载 2x 高清图，关键不是“强制指定”，而是用 srcset + 1x/2x 描述符 并确保不干扰匹配逻辑——尤其要避免误加 sizes 属性。
只用 x 描述符，不写 sizes
这是适配设备像素比最直接的方式。浏览器会读取当前设备的 devicePixelRatio（比如 iPhone 是 2 或 3），然后从 srcset 中选最匹配的 x 值：
-
srcset="photo.jpg 1x, photo@2x.jpg 2x"→ DPR=1 时用photo.jpg，DPR=2 时用photo@2x.jpg -
srcset="icon.png 1x, icon@2x.png 2x, icon@3x.png 3x"→ 覆盖常见高分屏（MacBook Pro、iPhone 15 Pro、Surface Laptop） - 注意：不能混用 w 和 x，例如
"img-400w.jpg 400w, img-2x.jpg 2x"会让整个srcset失效
确保图片尺寸一致，避免拉伸模糊
即使加载了 @2x 图，如果 CSS 没控制好渲染尺寸，仍会模糊：
- 给
<img>设置明确的width和height（或用aspect-ratio），让浏览器预留正确空间 - CSS 中用
max-width: 100%; height: auto;保持比例，不要靠父容器强行缩放 - 举例：一张设计稿是 200×100 px 的图标，提供
icon.png（200×100）和icon@2x.png（400×200），CSS 设为width: 200px; height: 100px;，DPR=2 时浏览器渲染 400×200 像素区域，正好填满不缩放
兼容性兜底与 fallback
老浏览器（如 IE）不支持 srcset，需保留 src 作为降级：
立即学习“前端免费学习笔记（深入）”；
<img src="photo.jpg" srcset="photo.jpg 1x, photo@2x.jpg 2x" alt="示例">-
src会被所有浏览器识别，srcset仅被现代浏览器解析并覆盖 - 不需要 JavaScript 检测 DPR，浏览器原生支持且更准确
慎用 sizes —— 它会关闭 x 匹配模式
一旦写了 sizes，浏览器就切换成「按布局宽度匹配 w 图」，完全忽略 1x/2x：
- 错：
srcset="a.jpg 1x, b.jpg 2x" sizes="100vw"→sizes存在，1x/2x不生效，浏览器尝试按宽度查表，但没提供w项，最终可能退回到src - 对：高分屏适配场景下，不要写 sizes；需要响应式宽度适配时，才改用
w + sizes组合
