media属性必须写在source标签内才有效，浏览器仅依据每个source的media属性调度资源；常见错误包括断点逻辑堆在picture上、顺序未从宽到窄排列、边界值不互斥、语法错误如缺括号或单位、混用描述符、video的source media被忽略等。

media属性必须写在里，上加无效

浏览器根本不会读里的值，写了等于白写。真正起作用的是每个自己的media属性——它才是浏览器做资源调度的唯一依据。常见错误是把断点逻辑全堆在上，结果所有都被跳过，最后只加载<img src alt="HTML文档中Picture标签的Media属性在复杂视口切换下的资源调度" >兜底图。

断点顺序错了，小屏设备永远拿不到高清图

浏览器对是自上而下匹配、遇真即停。如果media="(max-width: 767px)"放在最前面，那所有宽度≤767px的设备（包括iPhone竖屏、折叠屏半开状态、甚至缩放后的Chrome窗口）都会命中它，后面min-width: 1200px根本没机会执行。

• 正确顺序：从宽到窄，比如min-width: 1440px → min-width: 1200px → min-width: 768px → max-width: 767px
• 边界值要互斥，避免min-width: 768px和max-width: 768px并存，768px宽度会不可控地命中第一个
• 兜底项max-width: 767px必须存在且放最后，否则不匹配时直接空白

media值写错语法，整个被静默忽略

浏览器对media值校验很严格，非法写法不会报错，而是直接跳过该。比如media="768px"或media="tablet"会被当成not all处理，等效于永远不匹配。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

• 必须带括号和单位：media="(min-width: 768px)"✅，media="min-width: 768px"❌
• 不能混用描述符：srcset里同时出现400w和2x会导致解析失败，回退到<img src alt="HTML文档中Picture标签的Media属性在复杂视口切换下的资源调度" >
• type="image/webp" + media在iOS Safari有闪白风险，优先用srcset + media

video的source media属性不生效，别指望它省流量

<video></video>里的<source media=""></source>纯属装饰，Chrome/Firefox/Safari/Edge全部忽略它的条件判断。Network面板里你会看到所有src都发了请求，哪怕当前视口明显不满足min-width: 1200px。

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

• 视频响应式切换必须用window.matchMedia() + 手动改video.src + 调用video.load()
• <picture></picture>的media才真正控制资源调度，这是唯一能靠纯HTML实现“按需加载”的场景
• 所有的srcset路径必须真实存在，404时浏览器静默fallback，调试得靠DevTools Network面板确认实际加载项

最容易被忽略的是：浏览器只看第一个匹配的，不是“选最优”，而是“选第一个真”；所以顺序不是风格问题，是逻辑开关。任何断点重叠、语法错误或位置错位，都会让高清资源彻底失效，且无提示。