<picture>标签需严格遵循结构与语法：<source>必须在<img>前、media值须为合法CSS媒体查询且带括号、<picture>内末子元素必为含src和alt的<img>；浏览器按顺序取首个匹配<source>，不报错仅静默失效。
picture 标签不是“学会就能用”，而是“写错一点就完全不生效”——它没有报错、不提示、不 fallback 到警告，只默默加载 或留白。
为什么写了 media 却只加载一张图
根本原因不是浏览器没执行，而是 <source> 被浏览器跳过或忽略。常见失效点：
-
media="max-width: 768px"缺少括号 → 应为media="(max-width: 768px)"，否则静默失效 -
<source>写在<img>后面 → 浏览器直接忽略所有<source>，只走<img src> - 多个
media条件重叠，如同时存在(min-width: 768px)和(max-width: 768px)→ 768px 宽度命中第一条，第二条永不触发 -
<picture>上误写media属性（如<picture media="...">）→ 完全无效，media只对<source>生效
必须写对的三个硬性结构点
漏掉任意一个，图片区域就会空白或降级失败：
-
<picture>内最后一个子元素**必须是<img>**，且含src和alt；不能是<img />或<img> - 所有
srcset和<img>的src路径必须真实存在；404 不报错，Network 面板里清缓存后才能确认实际加载了什么 -
<source>的media值必须是合法 CSS 媒体查询；media="tablet"或media="768px"会被完全忽略
media 顺序和断点怎么排才不踩坑
浏览器不“选最优”，只“取第一个匹配”。顺序错了，宽屏设备可能永远加载手机图：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确顺序：从宽到窄，比如
media="(min-width: 1200px)"→media="(min-width: 768px)"→media="(max-width: 767px)" - ❌ 错误顺序：把
max-width放最前，小屏规则卡死全部匹配路径 - 断点之间不留间隙，也避免重叠；推荐用
max-width: 767px和min-width: 768px这种无缝衔接写法 - 别依赖
orientation: landscape—— iOS Safari 行为不稳定，容易失效
什么时候该用 picture，什么时候该用 img + srcset
90% 的响应式需求其实不需要 <picture>：
- 只需按视口宽度切换分辨率（如小屏加载 400w 图，大屏加载 1200w 图）→ 直接用
<img srcset="" sizes="">更简单安全 - 需要不同构图（手机裁人脸、桌面展全景）→ 必须用
<picture>+<source media> - 需优先支持 WebP/AVIF，但兜底 JPEG →
<picture>+type是唯一声明式方案 - 混用
w和x描述符（如photo-800w.jpg 800w, photo@2x.jpg 2x）→ 整个srcset被忽略，回退到<img src>
真正难的不是语法，而是理解 browser 在加载阶段就完成匹配——没有 JS 干预，没有运行时重选，写完就得一次对。调试时打开 Network 面板，禁用缓存，看实际发了哪些请求，比读文档更快定位问题。
