srcset + sizes 是唯一靠谱组合，因浏览器依据图片在页面中实际占位宽度选图，需同时提供可选资源（srcset的w单位）和各断点下占宽提示（sizes），缺一或混用x单位即失效。
直接用 srcset + sizes，别碰 image-set() —— 后者只认设备像素比（DPR），不响应视口宽度变化，90% 的“响应式图片”需求它根本解决不了。
为什么 srcset + sizes 是唯一靠谱组合
浏览器不是靠“屏幕分辨率”选图，而是靠“这张图在页面里实际占多宽”来决策。你得同时告诉它两件事：有哪些图可选（srcset），以及在不同断点下这张图会占多宽（sizes）。
-
srcset里用w单位（如"photo-400w.jpg 400w"），必须配sizes；混用x（如"icon@2x.png 2x"）会整个属性失效 -
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 600px"不是 CSS 宽度，而是给浏览器的“估算提示”——它据此算出目标渲染宽度，再挑最接近的w值资源 - 漏写
sizes时浏览器默认按100vw算，小屏可能加载桌面大图，带宽浪费且首屏卡顿 -
src必须保留，它是无 JS 或老浏览器的兜底，不是可选项
picture 元素该用在哪儿
当需要「艺术指导」——比如移动端裁人脸、桌面端展全景——<picture></picture> 是唯一能精准控制构图的方案，但规则比 srcset 更严格。
- 每个
<source></source>必须有media属性（如media="(max-width: 768px)"），全写media="(min-width: 0)"会导致只有第一个生效 -
<source></source>里只能用srcset（不能只写src），而最终的<img>必须有src和alt - 不要嵌套复杂媒体查询，像
(min-width: 320px) and (max-width: 480px) and (orientation: portrait)难维护且部分浏览器解析失败 - 验证是否生效？别看渲染效果，去 Chrome DevTools → Network → Filter
img，缩放窗口看请求文件名是否切换
background-image 怎么做响应式切换
image-set() 在背景图场景下基本等于摆设：Firefox 不支持，且只响应 DPR，iPad Pro（2x）永远走 2x 图，1080p 笔记本（1x）却拿不到高清图——这不是 bug，是设计限制。
- 真正可控的做法是媒体查询分层覆盖：
@media (min-width: 768px)内重写background-image，路径必须是真实可访问的 URL（Webpack 的@/assets别名在 CSS 里不会被解析） - 所有断点下的
background-size和background-position要保持一致，否则切换时会跳变 - 想加淡入淡出？
background-image无法transition，必须用双伪元素 +opacity控制，且容器需固定高度（height: 400px），不能用height: auto - 如果真要 DPI 适配，可在每个媒体查询块内叠加
image-set()，但得接受 Firefox 用户看到的是 1x 图
最易被忽略的点：所有 srcset 和 <source srcset></source> 中的路径必须 404 可查——只要一个 404，对应候选就被跳过，浏览器直接降级到 src；而 background-image 的路径错误，连 Network 面板都看不到请求发出。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
