srcset 使用 w 描述符时必须配合 sizes，否则浏览器忽略 srcset、只加载 src；sizes 告知浏览器图片在各断点下的渲染宽度（如 vw/px），供其结合设备 DPR 从 srcset 中选出最匹配的资源。

srcset 用了 w 描述符却没配 sizes，浏览器直接忽略 srcset，只加载 src 指定的图。

srcset 中的 w 描述符必须搭配 sizes

浏览器看到 srcset="small.jpg 400w, medium.jpg 800w" 这种写法时，会进入「宽度匹配模式」——但它根本不知道这张图在页面里实际占多宽。没有 sizes，它无法把「视口宽度 × 设备像素比」和「候选图的 w 值」对上号，结果就是放弃响应式逻辑，退化为加载 src 或第一张图。

常见错误现象：

• 开发者工具 Network 面板里始终只看到 small.jpg 被加载，哪怕在桌面端刷新也一样
• 明明写了三张图，但 srcset 在 Safari iOS 11–12.0 上完全不生效

正确做法是补全 sizes，例如：sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 400px"。最后一项不能带媒体条件，它是兜底值。

sizes 的值不是 CSS 宽度，而是“告诉浏览器这张图将渲染多宽”

sizes 不控制布局，也不替代 width 或 max-width。它只是提前声明：在某个断点下，这张图最终会占据多少 CSS 像素宽。浏览器拿这个值乘以当前设备的 window.devicePixelRatio，再从 srcset 中挑最接近的 w 值。

使用场景举例：

• CSS 设置了 width: 100%; max-width: 400px; → sizes="(max-width: 400px) 100vw, 400px"
• 图片在栅格中固定占 1/3 宽，最小断点 768px → sizes="(max-width: 768px) 100vw, 33.33vw"
• 导航栏 logo 固定高宽，但移动端全屏显示 → sizes="(max-width: 480px) 90vw, 200px"

容易踩的坑：

htmlppt.skill

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

下载

• 写成 sizes="100%" 或 sizes="400"（缺单位）→ 浏览器解析失败，整个 sizes 被忽略
• 漏掉某段视口范围，比如没覆盖 >1200px 的情况 → 回退到 src
• 用 % 单位（如 50%）→ 不被支持，必须用 vw、px、em 等

w 和 x 描述符不能混写在同一 srcset 中

浏览器解析 srcset 时，会根据你用的是 w 还是 x 切换整套匹配逻辑。一旦混用，比如 srcset="icon-1x.png 1x, icon-400.png 400w"，多数浏览器直接放弃解析，整个 srcset 失效，只加载 src。

参数差异：

• x 描述符适用于固定尺寸图标（如 width: 48px; height: 48px;），无需 sizes，但灵活性差
• w 描述符适配流式布局，必须配 sizes，推荐用于绝大多数响应式图片场景

性能影响：

• 错用 x 在 DPR 变化频繁的设备（如折叠屏横竖切换）上容易选错图
• 只用 w + 合理 sizes 能让浏览器在首次 HTML 解析阶段就决定加载哪张，减少重绘与回流

兼容性陷阱：Safari 12.1 之前不认 w + sizes 动态匹配

Chrome/Firefox/Edge(Chromium) 对 srcset + sizes 支持良好，但 Safari 直到 12.1 才完整实现 w 描述符的动态选择。iOS 11–12.0 会忽略 sizes，仅按设备像素比粗略匹配（类似 x 行为），导致小图被放大模糊。

如果你仍需支持这些旧版 Safari：

• 降级方案用 + ，例如：
• 保留 src 属性作为所有不支持 srcset 的浏览器兜底
• 避免依赖 sizes 计算出的“最优图”，而是在关键断点手动指定 srcset 候选

真正难的不是写对语法，而是让 sizes 的每个分段都精准对应真实 CSS 布局行为——稍有偏差，浏览器就选错图，且很难从视觉上察觉。

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