浏览器加载同一张图是因为匹配逻辑被破坏：media属性位置错误、缺少括号或置于之后均导致失效；必须从宽到窄排序且为强制兜底；适用于构图变化而非单纯分辨率切换。

为什么写了 却总加载同一张图

不是浏览器“不响应”，而是匹配逻辑被破坏了。浏览器对 是线性扫描、遇真即停，根本不会比对全部规则。常见失效点集中在三处：

• media 属性写在 标签上（如 ）→ 浏览器完全忽略该属性
• media="(max-width: 768px)" 缺少括号（写成 media="max-width: 768px"）→ 静默失效，对应 被跳过
• 放在 后面 → 所有 被忽略，只加载

验证方法：打开 DevTools 的 Network 面板，看哪些 srcset 地址实际发起了请求；如果全没发，说明 没被识别。

的顺序为什么必须从宽到窄

浏览器不“计算最优”，只“取第一个匹配”。比如你写：

<source media="(max-width: 767px)" srcset="mobile.jpg"><source media="(min-width: 768px)" srcset="desktop.jpg"></source></source>

那么所有宽度 ≤ 767px 的设备永远命中第一条，desktop.jpg 永远不会被加载——哪怕窗口拉到 2000px 宽也一样。

正确顺序应是限制更强的放前面：

• media="(min-width: 1200px)"（桌面大屏）
• media="(min-width: 768px)"（平板/小桌面）
• media="(max-width: 767px)"（手机）

注意断点不要重叠：(min-width: 768px) 和 (max-width: 768px) 并存时，768px 宽度会命中前者，后者无机会执行。

htmlppt.skill

把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。

下载

不是可选装饰，而是强制兜底节点

本身不渲染任何内容， 才是最终呈现和可访问性的唯一载体。漏掉或写错会导致空白、404 或屏幕阅读器无法读取。

• 必须写成 ，不能自闭合（ 或 ）
• src 必须存在且可访问，否则现代浏览器直接渲染为空白（无报错提示）
• 推荐给 也加 srcset 和 sizes，尤其当 fallback 图需适配 Retina 屏时

如果发现页面图片区域一片空白，先检查 是否缺失 src，再查 Network 中 fallback 图是否返回 404。

什么时候该用 ，而不是 srcset + sizes

的核心价值不是“换分辨率”，而是“换构图”——也就是 art direction。它解决的是语义级变化，不是像素级优化。

• ✅ 该用 ：桌面端展示全景横图，移动端只裁切人物脸部特写；卡片图在小屏上要突出文字区域，大屏上保留背景留白
• ❌ 别硬套 ：只是同一张图在不同宽度下加载 400w / 800w / 1200w 版本 → 直接用 更简洁、兼容性更好

真正容易被忽略的一点：服务器若不支持按 Accept 请求头返回不同 MIME 类型（如 image/avif），type="image/avif" 就形同虚设——浏览器不会降级尝试下一个 ，只会跳过。

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