标签不切换图片，仅由浏览器根据media属性自动选择最适配的图片；media必须写在source标签内且语法正确，断点顺序需从宽到窄，并与CSS断点一致，img标签的src作为必需兜底。

标签本身不切换图片，它只是把选择权交给浏览器——写对的media顺序和语法，浏览器才会在加载阶段自动挑出最合适的那张。

media必须写在里，不能写在上

浏览器完全忽略这种写法。每个必须单独带media属性，且值是合法的CSS媒体查询字符串：

• ✅ 正确：media="(max-width: 768px)"（带括号、完整语法）
• ❌ 错误：media="max-width: 768px"（缺括号，静默失效）
• ❌ 错误：media="768px" 或 media="tablet"（非法值，整个被跳过）

断点顺序必须从宽到窄，否则高分辨率图永远不生效

浏览器按从上到下的顺序扫描，遇到第一个匹配的就停止判断。顺序错了，小屏规则会“卡住”所有设备：

• ✅ 推荐顺序：先桌面，再平板，最后手机
  <source media="(min-width: 1200px)" srcset="desk.jpg">
<source media="(min-width: 768px)" srcset="tab.jpg">
<source media="(max-width: 767px)" srcset="mob.jpg">
• ❌ 错误顺序：手机规则放最前 → 所有宽度≤767px的设备都命中它，后面两条根本不会执行

断点要和CSS响应式断点一致，避免样式与图片错位

media里的数值不是随便写的，它得对应你项目中实际生效的视口宽度（viewport width），不是设备物理像素：

HTML Extract

使用 MinerU 从 HTML 页面和文件中提取内容，将 HTML 转换为保持标题、列表、表格及文本层次结构的干净、结构化 Markdown。F...

下载

• 用width（如(max-width: 768px)），别用device-width（已不可靠）
• 断点建议与CSS保持一致：比如CSS用@media (max-width: 768px)，HTML里也用media="(max-width: 768px)"
• 可统一用em单位增强一致性，例如48em ≈ 768px（取决于根字号）

是必需兜底，src要设最小屏或通用图

不是可选的，它是语义核心和降级保障：

立即学习“前端免费学习笔记（深入）”；

• 所有都不匹配时，浏览器只加载，所以它的src应指向最小屏图或通用图，避免浪费带宽
• 必须含alt属性，这是可访问性的唯一来源
• 的srcset仍会被解析（即使前面有匹配的），所以不要让它重复加载大图