浏览器静默跳过的最常见原因是media属性写法错误，必须是完整合法的css媒体查询，括号不能省、关键字不能漏；其次type值错误、服务器content-type不匹配、顺序不当或图片文件损坏也会导致fallback。

为什么总 fallback 到 而不加载任何

浏览器静默跳过所有 <source></source> 的最常见原因是 media 属性写法错误。它必须是完整、合法的 CSS 媒体查询，括号不能省，关键字不能漏。

✅ 正确：media="(max-width: 768px)"、media="(min-width: 1440px)"、media="(prefers-color-scheme: dark)"

❌ 错误：media="max-width: 768px"（缺括号）、media="768px"（非媒体查询）、media="screen and (max-width: 768px)"（冗余且可能触发兼容性降级）

检查 Network 面板里 <source></source> 对应的请求：如果状态是 (blocked:mime-type) 或直接 404，说明 type 值写错，或服务器返回的 Content-Type 不匹配（比如写了 type="image/webp"，但服务器返回 text/plain）。

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

多个 的 media 断点怎么写才不冲突

断点之间必须互斥，否则浏览器只取第一个匹配项，后面的全被忽略——这不是 bug，是设计行为。

• media="(max-width: 768px)" 和 media="(min-width: 768px)" 在 768px 宽度下会同时命中，但只有前者生效
• 推荐写法是用“开区间”避免临界重叠：max-width: 767px → min-width: 768px → min-width: 1024px
• 平板断点建议显式限定范围：media="(min-width: 768px) and (max-width: 1023px)"，比只写 min-width: 768px 更可控

srcset 用 w 还是 x？什么时候该配 sizes

srcset 的描述符决定浏览器依据什么做选择：

• 用 w（如 photo-400w.jpg 400w, photo-800w.jpg 800w）→ 浏览器根据图片在页面中**实际渲染宽度**（由 sizes 提供）+ DPR 计算所需像素，再选最接近的源。必须配 sizes，否则退化为等效于 src
• 用 x（如 photo.jpg 1x, photo@2x.jpg 2x）→ 直接按设备像素比匹配，不用 sizes；适合固定尺寸容器、DPR 差异明显的场景
• 混用风险高：同一 <source></source> 内不要同时出现 400w 和 2x，浏览器行为未定义

type 属性失效的三个关键原因

type 是现代格式（WebP/AVIF）降级的核心，但它非常“娇气”：

• type 值必须是标准 MIME 类型：image/webp ✅，webp ❌，image/jpg ❌（正确是 image/jpeg）
• 服务器返回的响应头 Content-Type 必须与 type 完全一致，哪怕多一个空格或大小写错误（如 IMAGE/WEBP）都会导致跳过
• <source></source> 顺序即优先级：所有 image/avif 必须排在 image/webp 前，image/webp 排在 image/jpeg 前；浏览器从上到下匹配，找到第一个支持的就停

真正容易被忽略的是：即使 HTML 写对了，type 也生效了，但若图片文件本身损坏、编码不合规（比如 AVIF 缺少关键帧），浏览器仍会静默 fallback 到下一个 <source></source> 或最终 <img> —— 这类问题只能靠真实设备 + 网络日志交叉验证。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！