media属性必须写完整媒体查询语法如(max-width:768px)，括号不可省略；多个source按从上到下顺序匹配，首条满足条件者生效，全不匹配则回退至img。
picture 标签里 source 的 media 属性怎么写才生效
不加 media 或写错语法，浏览器就当它不存在，直接 fallback 到 img；必须用合法的媒体查询语法，且注意浏览器解析顺序。
-
media值必须是完整媒体查询，比如(max-width: 768px)，不能只写768px或max-width: 768px（缺括号或screen and不是必须，但括号不能少） - 多个
source按从上到下顺序匹配，第一个满足media条件的生效，后面的被忽略——所以宽屏规则放前面，窄屏放后面，别反了 - 如果所有
source都不匹配，浏览器会加载img标签内容，这是保底行为，不是 bug
srcset 和 sizes 配合 source 使用时的常见错误
srcset 在 source 里不是随便列几个地址就行，它和 sizes 共同决定最终选哪张图；漏掉 sizes 或写错宽度描述，很可能导致高分辨率设备仍加载小图。
-
sizes必须存在且格式正确，例如sizes="(max-width: 480px) 100vw, (max-width: 960px) 50vw, 33vw"，每个条件后跟一个宽度值，单位只能是vw、px或em -
srcset中的每项需带宽度描述符，如photo-400w.jpg 400w, photo-800w.jpg 800w；用x描述符（如2x）时，sizes仍要提供布局宽度，否则浏览器无法换算 - Chrome 开发者工具的 Network 面板里，右键图片 → “Copy image src” 看实际加载的是哪个地址，比猜更可靠
WebP + fallback 到 JPEG/PNG 的兼容性处理
用 type 属性声明 image/webp 时，旧版 Safari、IE 完全忽略该 source，直接走下一个；但部分安卓 WebView 对 type 支持不稳定，不能只靠它判断。
- 务必把 WebP
source放最上面，JPEG/PNGsource放它下面，img标签放最后——这是降级链，不是并行尝试 - 不要依赖 JS 检测
supportsWebP后再插入picture，服务端或构建时生成更稳；若必须前端控制，注意 DOM 插入时机，避免闪动 -
type="image/webp"的值区分大小写，必须小写，写成image/WebP在某些浏览器里失效
picture 在 CSS 背景图场景下为什么无效
picture 只作用于 HTML 内联图片，对 background-image 完全没影响；想实现背景图响应式，得用 CSS 的 @supports + image-set() 或媒体查询重写 background-image。
- 试图在
source里写style="background-image: url(...)”是无效的，source不支持样式属性 - CSS 中
image-set()目前仅 Chrome/Firefox 较新版本支持，Safari 16.4+ 才开始有限支持，生产环境慎用 - 真正稳妥的做法：用媒体查询分别定义不同断点下的
background-image，配合background-size: cover控制裁剪
sizes 的必要性——很多人以为 srcset 自己能推断布局宽度，结果在 DPR=2 的手机上加载了本该给桌面用的大图。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
