浏览器不会自动适配，srcset失效最常见原因是语法错误（如混用w/x）或sizes漏单位/不匹配css实际宽度，导致整条属性被静默忽略而回退到src。
浏览器不会“自动适配分辨率”，它只按你写的 sizes 和 srcset 计算加载哪张图；没写对，高清屏照样拉伸小图，小屏也照搬大图。
为什么写了 srcset 但始终只加载 src 的图
最常见原因是 srcset 值语法错误或被整个忽略。浏览器遇到无法解析的 srcset 会静默丢弃整条属性，退回到 src。
- 检查控制台是否报错
Failed to parse 'srcset' value—— 多半是混用了w和x单位，比如img-400.jpg 400w, img-2x.jpg 2x，这种写法会让整个srcset失效 -
sizes值漏单位：写了sizes="50"而不是sizes="50vw"，浏览器直接拒识 -
src指向的是一张超大图（如 1920w），老浏览器加载卡顿，但你根本没意识到——因为没开 Network 面板验证
sizes 的值必须和 CSS 实际渲染宽度一致
sizes 不是“建议”，是浏览器选图的唯一依据。它声明的是“这张图在当前布局下会渲染多宽”，单位只能是 vw、px、em 等绝对长度单位，不能用 % 或 rem。
- 如果 CSS 设置了
img { width: 300px; }，但sizes="(max-width: 768px) 100vw, 50vw"，浏览器会按 100vw（比如 375px）去匹配srcset，结果选中 800w 图——而你实际只需要 300w - 断点逻辑要覆盖所有情况：写
sizes="(max-width: 480px) 100vw, 50vw"在 Safari 13.1 之前可能 fallback 到 100vw，稳妥做法是补默认项：sizes="(max-width: 480px) 100vw, (min-width: 481px) 50vw, 50vw" - 别依赖模拟器缩放判断效果，真正在意的是 Network 面板里请求的到底是
hero-400w.jpg还是hero-1200w.jpg
w 单位比 x 单位更可控，但必须配 sizes
用 2x 描述符只在图片占满视口且没写 sizes 时才可靠；现代布局中图片宽度由 CSS 控制，x 容易失效。真正能匹配布局宽度的是 w 单位。
-
srcset="logo-320.jpg 320w, logo-640.jpg 640w"+sizes="(max-width: 480px) 100vw, 320px"才能确保小屏加载 320w，桌面加载 640w - 如果只写
srcset="logo-2x.jpg 2x"不配sizes，iPhone SE（375px 宽 + DPR=2）本该加载 750w 图，但浏览器因无sizes默认按 100vw=375px 匹配，发现没有 375w 选项，就退到src或硬选最接近的 2x 图——清晰度和体积都失控 -
src必须存在，且应指向一个体积适中、清晰度够用的版本（比如 768w），否则 IE 或旧 WebView 用户看到的就是模糊图
最容易被忽略的一点：CSS 的 max-width: 100% 和 height: auto 只解决“视觉缩放”，不减少加载体积；而 srcset+sizes 才真正决定“加载哪张”。两者缺一不可，但作用完全不同。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
