关键在于用 sizes 告知图像实际布局宽度，使浏览器能从 srcset 的 w 候选图中精准匹配最适尺寸；x 仅适用于未写 sizes 的简单场景，而 w+sizes 才是响应式图片的正确路径。
用 srcset 和 sizes 提供多分辨率图像，关键不是“堆一堆图”，而是让浏览器知道：这张图在当前页面里实际占多宽，然后从你给的候选图中挑一个最匹配的。不配 sizes，srcset 很可能白写。
先分清 x 和 w 的用途
srcset 里的 1x/2x 描述的是设备像素比（DPR），比如 Retina 屏；320w/800w 描述的是图片自身的固有宽度（单位是 CSS 像素）。两者不能混用——选哪个取决于你有没有写 sizes：
- 没写
sizes：浏览器按 DPR 匹配x，但只适用于简单场景（如头像、图标），且容易失效 - 写了
sizes：浏览器彻底忽略x，只按布局宽度匹配w——这才是主流响应式图片的正确路径
sizes 必须告诉浏览器“这张图实际占多宽”
sizes 不是可选项，它是浏览器做选择的依据。它是一组媒体条件 + 对应宽度值，格式如 "(max-width: 480px) 100vw, (max-width: 960px) 800px, 800px"。注意几点：
- 每个条件后必须跟一个宽度值，可以是
vw、px或em，不能省略单位 - 最后一条建议写兜底值（如
800px），避免旧浏览器 fallback 到100vw导致小屏加载大图 - 如果图在移动端占满屏幕、桌面端固定 600px 宽，那就写
sizes="(max-width: 768px) 100vw, 600px"
srcset 要覆盖 sizes 计算出的所有可能宽度
浏览器会根据 sizes 算出“这张图当前渲染宽度是多少”，再从 srcset 中找最接近且不小于该宽度的 w 图。所以你的 srcset 必须覆盖所有常见尺寸：
立即学习“前端免费学习笔记（深入）”；
- 比如
sizes="(max-width: 480px) 100vw, 600px"，那小屏下图宽可能是 320px、375px、414px，大屏下固定 600px - 对应
srcset就该包含320w、480w、600w、900w等，别漏掉中间档位 - 不要只写
600w, 1200w—— 小屏可能只能渲染出 300px 宽，但没提供320w，浏览器只能硬选600w，浪费带宽
完整示例：一张自适应 banner 图
假设 banner 在手机上全宽显示，平板上最多占 768px，桌面端固定 900px 宽：
<img src="banner-900.jpg" srcset="banner-320.jpg 320w, banner-480.jpg 480w, banner-768.jpg 768w, banner-900.jpg 900w, banner-1200.jpg 1200w" sizes="(max-width: 480px) 100vw, (max-width: 768px) 768px, 900px" alt="活动横幅">
浏览器会：先看视口宽度 → 查 sizes 算出图宽 → 找 srcset 中最接近且 ≥ 该宽度的图 → 加载。整个过程由浏览器自动完成，无需 JS 干预。
