srcset用w描述符时sizes是强制搭档，缺之则浏览器无法计算目标物理像素宽度，直接忽略srcset而加载src；sizes必须带单位、真实反映css布局宽度，且w与x描述符不可混用。
srcset 用 w 描述符时，sizes 是强制搭档
浏览器看到 srcset 里有 400w、800w 这类单位，就立刻切换到「宽度匹配模式」，但它根本不知道这张图在页面里实际占多宽。没有 sizes，它没法把「视口宽度 × 设备像素比」和这些 w 值对上号，只能放弃整个 srcset，退化为加载 src 或第一个候选图。
常见错误现象：
- 写了
srcset="a.jpg 400w, b.jpg 800w"却没写sizes→ Chrome/Firefox 通常只加载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"。
容易踩的坑：
- 抄设计稿标注的“768px 断点下显示 256px”，却忽略栅格系统实际占位是
33.33%→ 应写sizes="(max-width: 768px) 100vw, 33.33vw" - 媒体查询空格不规范，如
(max-width: 768px)中间有空格 → 旧版 Safari 和 Edge 直接解析失败 - 误用
calc()或 CSS 变量，如sizes="(min-width: var(--md)) 50vw"→ 整条规则失效
w 和 x 描述符不能混用
srcset 解析时，浏览器靠后缀判断匹配逻辑：遇到 x 就看设备像素比（DPR），遇到 w 就结合 sizes 算目标物理像素宽度。混写会导致部分浏览器直接忽略整个 srcset，只加载 src。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
实操建议：
- 统一用
w：更可控，尤其适合响应式布局中图片宽度随容器变化的场景 - 统一用
x：仅适用于固定尺寸图标或 banner，且需确保所有源都覆盖常见 DPR（1x、2x、3x） - 别写
srcset="a.jpg 1x, b.jpg 800w"—— 浏览器不识别这种混合语法
浏览器如何从 srcset 中选图？不是“最接近”，而是“不小于 + 最接近”
浏览器先根据 sizes 和当前视口宽度算出图片的「显示宽度」（CSS 像素），再乘以设备 DPR 得到所需物理像素宽度，最后从 srcset 中挑一个**不小于该值**且最接近的源。
举例说明：
-
sizes="(max-width: 600px) 400px, 800px"，当前视口 1200px、DPR=2 → 所需物理宽度 = 800 × 2 = 1600px -
srcset提供a.jpg 400w、b.jpg 800w→ 两者都小于 1600，浏览器只能选b.jpg，哪怕明显不够清晰 - 正确做法是补上
c.jpg 1600w或更高，否则永远无法匹配高 DPR 场景
真正容易被忽略的是：这个“不小于”原则会让小屏用户在 DPR=3 的手机上，也可能加载远超需要的大图——只要 srcset 里没有更细粒度的中间档位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
