srcset本身不直接适配分辨率，而是提供多图候选，浏览器根据DPR或布局宽度自动选择；关键在与sizes配合——sizes必须准确声明图片渲染宽度，srcset需覆盖所有可能宽度，且两者单位与逻辑须严格匹配，否则浏览器将忽略srcset而仅加载src。
srcset 本身不直接“适配分辨率”，它提供多张图片资源，由浏览器根据设备像素比（DPR） 或 布局宽度 自动选择最合适的版本。关键不是写对 srcset，而是写对它和 sizes 的配合方式——否则浏览器很可能忽略你的多图配置，只加载 src。
srcset 里该用 1x/2x 还是 320w/768w
用 x 描述符（如 1x, 2x）表示设备像素比，适合固定尺寸、占满容器的图，比如头像、图标、全屏 banner。
用 w 描述符（如 320w, 768w）表示图片固有宽度（单位 px），必须配合 sizes 使用，适合 CSS 控制宽高的内容图，比如文章配图、卡片图、响应式横幅。
两者不能混写。例如：
❌ srcset="logo-400.jpg 400w, logo@2x.jpg 2x" → 整个 srcset 被浏览器丢弃，只加载 src。
✅ 要么全用 x：srcset="logo-1x.jpg 1x, logo-2x.jpg 2x"
✅ 要么全用 w + sizes：srcset="logo-320.jpg 320w, logo-640.jpg 640w" sizes="100vw"
sizes 是必须写的，不是可选建议
sizes 告诉浏览器：“这张图在当前页面里，CSS 渲染出来的宽度大约是多少”。浏览器拿这个值去匹配 srcset 中最接近且不小于它的 w 图。
常见写法示例：
- 图片在手机上全宽、桌面端固定 600px：
sizes="(max-width: 768px) 100vw, 600px" - 图片在小屏占 100vw、中屏占 50vw、大屏占 33vw：
sizes="(max-width: 480px) 100vw, (max-width: 960px) 50vw, 33vw"
注意：
- 每个媒体条件后必须跟合法单位（
vw,px,em），不能写%或rem - 最后一项建议写兜底值，避免旧浏览器 fallback 到
100vw -
sizes必须和实际 CSS 表现一致。如果sizes写50vw，但 CSS 强制设了width: 300px，浏览器仍按50vw算，结果可能加载远超需要的大图
srcset 的图片要覆盖所有可能的渲染宽度
浏览器会先算出“这张图当前该有多宽”，再从 srcset 中挑一个最接近且不小于该宽度的 w 图。所以你的 srcset 要覆盖 sizes 推导出的所有典型宽度。
比如 sizes="(max-width: 480px) 100vw, 800px"，视口可能是 375px（iPhone）、414px（iPhone Plus）、800px（平板），对应 srcset 就该包含：
-
320w（覆盖小屏基础宽度） -
480w（适配主流手机） -
800w（匹配平板固定宽） -
1200w（为高 DPR 设备留余量，比如 2x 屏在 414px 视口下需要约 828px 宽）
别只写 800w, 1600w——小屏用户会白白加载大图。
src 是降级兜底，不是最小图
src 属性必须存在，且应指向一个清晰度够用、体积适中的版本（比如 800w JPG）。原因：
- IE、旧版 Safari、部分 Android WebView 完全不支持
srcset，只加载src - 某些低版本 WebView 解析失败时会静默丢弃整个
srcset - 把
src设成320w，老设备用户看到的就是模糊图
完整可靠示例（自适应 banner）：
@@##@@
验证是否生效，唯一可靠方式是打开 DevTools → Network → 过滤 img → 切换设备预设或拖动窗口 → 刷新看实际加载的是哪张图，别靠“看起来清不清楚”判断。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
