picture标签仅按顺序匹配source并命中即停；media必须写在source内且带括号和单位，顺序须从宽到窄，img为必需兜底，type声明须与服务器content-type严格一致。
picture 标签本身不裁剪、不适配、不降级——它只做一件事：按顺序匹配 <source></source>，命中即停。90% 的“失效”不是浏览器问题，而是写法触发了静默跳过。
media 属性写错位置或语法，整条 <source></source> 被忽略
浏览器只认 <source></source> 上的 media，写在 <picture></picture> 标签上完全无效；漏括号、单位缺失也会让条件永远为 false。
-
media="(max-width: 768px)"✅ 正确（带括号、带单位） -
media="max-width: 768px"❌ 静默失效（缺括号） -
media="(max-width: 768)"❌ 静默失效（缺px） -
<picture media="(max-width: 768px)"></picture>❌ 完全被忽略（属性位置错）
<source></source> 顺序错误，宽屏设备永远加载手机图
浏览器线性扫描，遇到第一个 media 为 true 的就加载并终止，后面所有规则都不再检查。顺序不是“可选”，是匹配逻辑本身。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- ✅ 正确：从宽到窄 ——
<source media="(min-width: 1200px)"></source>→<source media="(min-width: 768px)"></source>→<source media="(max-width: 767px)"></source> - ❌ 错误：把
max-width: 767px放最前 → 所有视口 ≤767px 的设备都命中，桌面规则永远不执行 - ⚠️ 断点重叠（如同时存在
min-width: 768px和max-width: 768px）→ 768px 宽度行为未定义，Chrome/Safari 表现可能不一致
<img> 缺失、自闭合或没写 src，页面直接空白
<img> 不是装饰，是强制 fallback 节点。旧浏览器（IE）、<source></source> 全部不匹配、甚至只是 Safari 16.4 之前版本漏写 src，都会导致图片区域空着不报错。
- 必须存在，且必须是完整闭合标签：
<img src="/fallback.jpg" alt="描述">✅ -
<img>或<img>（无src）→ 页面留白，Network 面板里看不到任何图片请求 ❌ - 即使你用 WebP + JPEG 双
<source></source>，<img>的src也得是 JPEG 或 PNG 这类通用格式，否则 IE/旧安卓 WebView 会失败
type 声明与服务器响应头不一致，资源被静默丢弃
type="image/webp" 不是建议，是契约：浏览器要求服务端返回的 HTTP 响应头 Content-Type: image/webp 必须完全匹配，包括大小写、拼写、空格。
- ✅ 正确：
type="image/webp"+ Nginx 返回Content-Type: image/webp - ❌ 失效：
type="webp"、type="image/jpg"、type="image/jpeg "（末尾空格）→ 浏览器直接跳过该<source></source> - 排查方法：打开 Network 面板，过滤图片请求，看状态列是否标
blocked:mime-type或响应头里的Content-Type是否对得上
真正麻烦的从来不是写几行 HTML，而是你得同时管住三件事：media 条件的书写规范、<source></source> 的排列逻辑、以及服务器返回的真实 MIME 类型——漏掉任何一个，浏览器就安静地绕开你写的全部努力，直奔 <img src>。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
