sizes是srcset使用w描述符时的强制搭档，缺之则浏览器无法计算目标物理像素宽度，直接忽略srcset而加载src。
只写 srcset 不配 sizes，浏览器大概率直接忽略它，退化为只加载 src 指定的图——这不是 bug，是规范行为。
srcset 用 w 描述符时，sizes 是强制搭档
当你在 srcset 里写 photo-400w.jpg 400w, photo-800w.jpg 800w，浏览器立刻进入「宽度匹配模式」，但它根本不知道这张图在页面里会占多宽。没有 sizes，它无法把「视口宽度 × 设备像素比」和「400w / 800w」对上号，只能放弃响应式逻辑。
- 漏掉
sizes：现代浏览器通常 fallback 到加载src或第一个候选图；Safari iOS 11–12.0 可能完全不触发选择 -
sizes写错单位（如50%、400缺单位）：整个属性被解析失败，srcset形同虚设 - 最后一项没写兜底（如
sizes="(max-width: 768px) 100vw"）：旧版 Safari 或某些 Edge 可能 fallback 到100vw，导致小屏也拉大图
sizes 必须真实反映 CSS 布局宽度
sizes 不是控制样式，而是提前告诉浏览器“这张图**将渲染成多宽**”。它必须和你实际写的 CSS 对齐，否则选图就偏了。
- CSS 是
width: 100%; max-width: 400px;→sizes="(max-width: 400px) 100vw, 400px" - 栅格中固定占 1/3 宽，断点从
768px开始 →sizes="(max-width: 768px) 100vw, 33.33vw" - 导航 logo 移动端全屏、桌面端固定
200px→sizes="(max-width: 480px) 90vw, 200px" - 写成
sizes="100vw"看似安全，但如果父容器有max-width: 600px，桌面端仍会加载远超所需的图
w 和 x 描述符不能混写在同一 srcset 中
浏览器看到 srcset="icon-1x.png 1x, photo-800w.jpg 800w" 这种混合写法，会直接丢弃整个 srcset，只加载 src。它不是“部分生效”，而是整条属性失效。
- 用
w：目标是适配布局宽度，必须配sizes，适合 banner、内容图等流式场景 - 用
x：目标是适配设备像素比，sizes可省略，但只适用于固定宽高的图标、头像等 -
1x、2x必须写整数，1.0x或2.0x不被识别 -
src在x场景下仍是必需 fallback，尤其对不支持srcset的旧浏览器
验证是否真生效，别靠猜
打开 DevTools → Network 面板刷新，看实际请求的是哪个 URL；更准的方式是查 img.currentSrc，它实时反映浏览器最终选中的地址。
-
currentSrc在图片未加载完成时可能为空，建议监听load事件后再读 - Chrome Network 面板可加 Filter：
largeresources快速定位是否意外加载了超大图 - 如果始终只看到
src对应的图被加载，优先检查sizes是否缺失或语法非法（括号、空格、单位） - CDN 或图片服务加了签名参数（如
?v=abc123），会导致srcset中路径与真实资源不一致，返回 404 或低质图
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
