不切换图片是因为浏览器未匹配任何条件而回退到的src；常见原因包括media语法不完整、srcset缺少type或media、遗漏必需的标签，以及type类型不被支持或服务器content-type错误。
为什么 <picture></picture> 里写了 <source></source> 还是不切换图片
浏览器根本没匹配到任何 <source></source>，直接用了最底层 <img src="..."> 的兜底图——而你可能压根没意识到它在默默加载。
-
media值必须是完整 CSS 媒体查询，比如(max-width: 768px)，不能只写768px或漏掉括号 -
<source></source>必须带media或type（如type="image/webp"），二者缺一浏览器就跳过该条 -
<img>标签不是可选的：它必须存在、带src和alt，否则整个<picture></picture>会失效 - 多个
<source></source>按顺序匹配，第一个满足条件的就生效，后面的全被忽略
<source></source> 的 type 属性为什么经常白写
浏览器只认自己支持的 MIME 类型；不支持就跳过整条 <source></source>，哪怕文件路径正确、服务器返回 200。
- Safari 13 以下、旧版 Firefox 不支持
image/webp，写了也加载不了 - 服务器返回的
Content-Type必须和type一致，比如返回image/jpeg却声明type="image/webp"，照样被跳过 - 建议 fallback 到 JPEG：最后一个
<source></source>不带type，或用<img src="fallback.jpg">确保有图可显
用 <picture></picture> 还是 srcset + sizes？
纯按视口宽度换图（比如 banner 在手机/平板/桌面显示不同裁剪版本），优先用 <img srcset="..." sizes="..."> —— 更轻、更稳、更少出错。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
-
srcset里用w描述符（如hero-400w.jpg 400w），必须配sizes，否则浏览器退化为只看 DPR，可能加载错图 -
sizes值里不能带px，比如300px是错的，得写300vw或calc(100vw - 20px) -
<picture></picture>真正该用的场景是「艺术方向控制」：比如手机端只留人脸、桌面端展示整张风景照——内容完全不同，不是单纯缩放
移动端适配高 DPR 屏（Retina）的关键细节
光准备 @2x/@3x 图不够，浏览器怎么选、CSS 怎么控，漏一点就糊。
- 如果用
srcset+x描述符（如icon@2x.png 2x），sizes就不该出现——二者混用会让浏览器混乱 - 图片容器必须加
max-width: 100%; height: auto，否则即使资源对了，CSS 强制拉伸也会失真 - 别依赖
width/height属性固定尺寸，它们会覆盖响应式行为；用 CSS 控制宽高更可靠
真正容易被忽略的是：浏览器匹配 <source></source> 的过程完全静默，Network 面板里看不到“为什么没选它”，只能靠手动改 media 值、切设备模拟器、逐条注释排查。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
