srcset通过x描述符按设备像素比（DPR）提供多倍图，使浏览器自动选择匹配分辨率的图像，避免CSS拉伸导致的Retina屏模糊；需配合sizes指定CSS渲染尺寸，并注意构建工具路径处理与本地协议兼容性。
为什么 srcset 能解决 Retina 图片模糊问题
移动端 Retina 屏（如 iPhone 8+、iPad Pro）的设备像素比（window.devicePixelRatio）通常是 2 或 3，但 CSS 像素和物理像素不等价。如果只用一张 1x 尺寸的图，浏览器会把它拉伸渲染，导致模糊。srcset 让浏览器根据设备 DPR 自动选择匹配的图像资源，本质是“按需加载合适分辨率的图”，不是靠 CSS 缩放硬撑。
srcset 的写法必须带 x 描述符，不能只写尺寸
常见错误是把 srcset 当成“多尺寸备选”，比如写成 srcset="icon-100.png 100w, icon-200.png 200w" —— 这对 DPR 切换无效，w 描述符只响应视口宽度，不响应设备像素比。
正确做法是用 x 描述符显式声明设备像素比：
<img src="icon-100.png"
srcset="icon-100.png 1x,
icon-200.png 2x,
icon-300.png 3x">
-
1x对应 DPR=1（普通屏），2x对应 DPR≥2 的 Retina 设备 - 浏览器优先匹配最接近当前
devicePixelRatio的项，不四舍五入，比如 DPR=2.6 时选2x，不是3x -
src是兜底项，当浏览器不支持srcset时才用它（IE 全系不支持）
搭配 sizes 才能真正控制响应式布局下的实际渲染尺寸
仅用 srcset + x 描述符，图片仍可能被 CSS 拉伸或压缩——比如一个 width: 50% 的容器里放了 2x 图，但图本身宽高没设，浏览器无法判断该以多少 CSS 像素渲染它。
立即学习“前端免费学习笔记（深入）”；
加 sizes 告诉浏览器：“这张图在不同断点下占多少 CSS 像素”，才能让浏览器算出需要加载哪张物理尺寸的图：
<img src="hero-800.png"
srcset="hero-800.png 1x,
hero-1600.png 2x,
hero-2400.png 3x"
sizes="(max-width: 768px) 100vw, 800px">
-
(max-width: 768px) 100vw表示小屏时图宽占满视口 -
800px是默认情况（大屏）下图的 CSS 宽度 - 浏览器结合
sizes和srcset，算出“我需要一张物理宽度 ≈ 800 × DPR 的图”，再从srcset中挑最匹配的
Webpack/Vite 构建时容易漏掉 2x/3x 图的路径处理
开发时手动维护三套图文件名（logo.png、logo@2x.png、logo@3x.png）很麻烦，更常见的是用构建工具自动生成。但要注意：
- Vite 默认不会把
@2x这类后缀识别为静态资源，需在vite.config.js中配置assetsInclude或改用.png?raw后缀 - Webpack 的
url-loader或asset-module需确保generator.filename包含[name]@[density]x.[ext]类似逻辑，否则打包后 2x 图路径错乱 - 本地开发用
file://协议时，部分浏览器（如 Safari）会禁用srcset，务必用http://localhost测试
最稳的方式是：所有图走构建产物路径，用 import 引入再拼 srcset 字符串，避免硬编码路径出错。
