不自动适配，而是严格按顺序匹配首个 ；media 重叠、漏单位、缺 src 或 type 不支持均致白屏/404；90% 场景应优先用 ，仅构图需变化时才用 。
为什么 <picture></picture> 加载了错误尺寸的图片
浏览器不会预判、不会回退、不会兜底——它只从上到下检查 <source></source>，遇到第一个匹配的就停。
常见诱因包括：
- media 断点重叠，比如 (max-width: 768px) 和 (min-width: 768px) 在 768px 处同时命中，但只有前者生效（因为排在前面）
- 高分辨率设备（如 Retina）没加 2x 或 srcset 中的密度描述符，导致明明有高清图却加载了 1x 版本
- 漏写单位，768 是无效值，必须写成 768px为什么页面出现空白或 404
<img> 不是可选的，它是强制 fallback 节点：
- 如果所有 <source></source> 都不匹配，且 <img> 没写 src，整个区域就是空的
- 如果 <img> 的 src 路径错了，就会 404
- <img> 必须放在 <picture></picture> 最末尾，且至少带 src 和 alt
type 属性根本不会“降级”
<source type="image/avif"></source> 和 <source type="image/webp"></source> 不是“优先用 AVIF，不行再用 WebP”，而是：
- Chrome 支持 image/avif → 加载 AVIF
- Chrome 不支持 → 直接跳过该 <source></source>，继续看下一个
- 如果下一个写的是 type="image/jpeg"，而你把它放在 AVIF 后面，那没问题；但如果中间插了个不匹配的 media，就可能跳过 JPEG 直接到 <img>
所以“格式优先级”靠的是顺序，不是浏览器智能判断
90% 的场景其实不该用 <picture></picture>
- 只需根据视口宽度切换分辨率？用 <img srcset="" sizes=""> 更轻量、更容错
- 只需提供 WebP + JPEG 回退？一个 <source type="image/webp"></source> 加一个 <source type="image/jpeg"></source> 就够，但要注意顺序和 fallback 安全性
- 真正需要 <picture></picture> 的，是构图必须变化的场景：比如移动端裁成竖版头像，桌面端用横版全景图——这时 media + 不同 srcset 才有意义
最常被忽略的一点：没有 sizes 的 srcset 在 <source></source> 里几乎等于摆设，浏览器无法知道该加载多宽的图；而 <img> 自身的 width/height 属性仍建议写，防止布局偏移。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
