用 srcset + sizes 实现响应式图片时，必须严格区分 w（对应布局宽度，需配 sizes）和 x（对应设备像素比，不依赖 sizes），严禁混用；sizes 必须与真实 CSS 渲染宽度一致，否则选图失准；src 是必填兜底项，应设为中等清晰度图而非最小图。
直接用 srcset + sizes 就能实现浏览器自动选图，但写错一个参数，它就静默回退到 src——连报错都不会有，你只能在 Network 面板里看到加载了 4K 图却只显示 200px 宽。
srcset 里该用 w 还是 x？别混着写
用 w（如 "photo-800.jpg 800w"）对应页面布局宽度变化；用 x（如 "photo.jpg 2x"）对应设备像素比（DPR）。两者逻辑不同，浏览器行为也不同：
-
w必须配sizes才生效，否则浏览器默认按100vw算，小屏也拉大图 -
x不依赖sizes，但只响应 DPR，不响应视口缩放——比如 iPad Pro 在横竖屏切换时渲染宽度变了，x却不会换图 - 严禁混用：
srcset="a-400w.jpg 400w, b@2x.jpg 2x"是未定义行为，Chrome 可能整个忽略该属性 - 若需兼顾 DPR 和视口，优先用
w+sizes；只有纯图标、固定尺寸组件才考虑x
sizes 属性写错等于没写
sizes 不是“建议宽度”，而是告诉浏览器：“这张图在当前布局下，CSS 渲染宽度会是多少”。它必须和真实 CSS 表现一致，否则选图失准：
- 写成
sizes="(max-width: 768px) 100vw, 50vw"意味着：≤768px 时占满视口，否则占一半；如果实际 CSS 把图片限制在max-width: 300px，那这个sizes就高估了 2–4 倍 - 漏掉单位（如写
"50"而非"50vw"）或括号不闭合（如"(max-width: 768px 100vw"），浏览器直接忽略整条sizes - 移动端常被忽略的点：某些 Android WebView 对媒体查询语法更敏感，
min-width比max-width更稳，可写成sizes="(min-width: 769px) 50vw, 100vw"
src 是必填项，不是可选项
没有 src，老浏览器（IE、iOS 12 以下 Safari、部分低版本 WebView）会完全不渲染图片，连 alt 文字都不触发：
立即学习“前端免费学习笔记（深入）”；
-
src应指向一个中等清晰度、体积适中的版本（如 768w 或 800w），作为兜底而非“最小图” - 不要把
src指向 200w 小图再指望srcset补救——浏览器不会“升级”src，只会用它 fallback - Network 面板里如果某张图请求头里没有
Sec-CH-DPR或Width字段，说明浏览器根本没走响应式逻辑，大概率是src存在但srcset/sizes有语法错误
最隐蔽的问题往往出在「看似生效」：DevTools 显示加载了 800w 图，但实际渲染宽度只有 320px，说明 sizes 偏大或断点没覆盖真实布局。别信代码写了就对，要对着 Network 请求宽度和 Elements 面板里的 computed width 一帧帧对齐。
