srcset并非屏幕适配万能开关，仅提供图片选项供浏览器依device-pixel-ratio、视口宽等自主选择；支持x（设备像素比）和w（固有宽度）两种互斥描述符，x需配src作1x回退，w必配sizes，sizes须准确描述渲染宽度否则失效。
srcset 不是用来“做屏幕适配”的万能开关，它只负责告诉浏览器“有哪些图可选”，最终选哪张由浏览器根据 device-pixel-ratio、视口宽度、网络条件等自行决定。你不能强制它在 2x 屏上一定用 @2x 图，也不能靠它替代 picture 做艺术指导（art direction）。
srcset 的两种写法：x 和 w，别混用
srcset 支持两种描述符：x 描述设备像素比（如 1x、2x），w 描述图片固有宽度（如 320w、768w）。二者不能混在同一属性里——浏览器会直接忽略整个 srcset 值。
- 用
x描述符时，必须搭配src（作为 1x fallback），且所有图尺寸相同，仅分辨率不同：<img src="logo.png" srcset="logo.png 1x, logo@2x.png 2x"> - 用
w描述符时，必须搭配sizes属性，否则浏览器无法估算渲染宽度，会退化为只加载src：<img src="hero.jpg" srcset="hero-320.jpg 320w, hero-768.jpg 768w" sizes="(max-width: 768px) 100vw, 768px">
sizes 属性写错，srcset 就白配了
sizes 不是“让图片变多大”，而是“告诉浏览器这张图在当前页面布局下大概会渲染成多宽”。如果写成 sizes="100vw" 却实际被 CSS 限制在 300px 宽，浏览器可能选错图；如果完全不写 sizes 而用了 w 描述符，现代浏览器会按 100vw 猜测，但结果不可控。
- 常见写法：
sizes="(min-width: 768px) 50vw, 100vw"表示“桌面端占视口一半，移动端占满” - 绝对单位也合法：
sizes="300px"，适合固定宽的卡片图 - 千万别写成
sizes="300"或sizes="300px, 50vw"（缺少媒体条件）——语法错误会导致整个sizes被忽略
浏览器兼容性与 fallback 处理
所有主流浏览器都支持 srcset + sizes（Chrome 38+、Firefox 38+、Safari 9+、Edge 13+），但 IE 完全不支持。如果你仍需兼容 IE，src 必须指向一张可用图（通常是最大尺寸或中间尺寸），不能留空或指向 placeholder。
- 不要依赖 JS 检测后动态写
srcset——这会让懒加载、预加载失效，且首次渲染仍走src - 服务端生成
srcset值时，注意路径一致性：所有srcset中的 URL 必须可访问，且相对路径基于当前 HTML 文件解析，不是基于 JS 执行位置 - CDN 或图片服务（如 Cloudinary）返回的
srcset字符串里若有空格或逗号未编码，会导致解析失败，建议用encodeURIComponent处理参数部分
真正难的不是写出语法正确的 srcset，而是搞清设计稿里的“这张图在不同断点下实际渲染宽度是多少”，以及“对应宽度下该提供哪几个物理尺寸的图”。这两点错了，后面全白搭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
