source 的 media 属性仅声明图片源的启用条件，不负责自适应；必须写在 source 标签内且语法完整（如 media="(max-width: 768px)"），顺序需从宽到窄，边界不重叠；分辨率切换由 srcset + sizes 控制；viewport 设置和真机测试至关重要。
source 元素的 media 属性本身不做“屏幕自适应”，它只做一件事：告诉浏览器“这个图片源在什么条件下可以被考虑”。是否加载、加载哪张，取决于你写的条件是否匹配，以及 source 的顺序是否合理。
media 属性必须写在 <source></source> 里，且括号不能少
常见错误是漏掉括号或写错语法，导致整条 <source></source> 被浏览器静默忽略：
-
media="max-width: 768px"❌ —— 缺括号，等价于not all，直接跳过 -
media="(max-width: 768px)"✅ —— 完整合法，可参与匹配 -
media="768px"或media="tablet"❌ —— 非法值，整个<source></source>失效 -
media="(min-width: 1200px) and (orientation: landscape)"✅ —— 多条件组合没问题
断点顺序必须从宽到窄，否则小屏永远卡死
浏览器按 <source></source> 出现顺序从上到下扫描，遇到第一个 media 返回 true 就立刻加载，不再往下看。顺序错了，高分辨率图根本没机会生效：
- ✅ 正确顺序：
<source media="(min-width: 1200px)"></source>→<source media="(min-width: 768px)"></source>→<source media="(max-width: 767px)"></source> - ❌ 错误顺序：
<source media="(max-width: 767px)"></source>放最前 → 所有 ≤767px 的设备都命中它，后面两条永远不会执行 - ⚠️ 边界重叠风险：比如同时写
(min-width: 768px)和(max-width: 768px)，768px 宽度会稳定命中前者，但行为不可控，建议用非重叠区间
media 不控制分辨率切换，srcset + sizes 才管这个
media 决定“用哪一组图”（比如横屏宽图 vs 竖屏竖图），而同一组内选 1x 还是 2x、400w 还是 800w，得靠 srcset 和 sizes：
-
<source media="(orientation: landscape)" srcset="wide-800.jpg 1x, wide-1600.jpg 2x"></source>—— 横屏时加载这组，再由 DPR 决定用哪个 -
<img src="fallback.jpg" srcset="fallback-400.jpg 400w, fallback-800.jpg 800w" sizes="(max-width: 480px) 100vw, 400px">—— 即使所有<source></source>都不匹配，<img>自身也该适配 - ⚠️
srcset里混写400w和2x会导致解析失败，直接 fallback 到<img src>
viewport 设置和真机测试比写对 media 更容易被忽略
很多“没切换”的问题，其实不是 media 写错了，而是：
- 页面没加
<meta name="viewport" content="width=device-width, initial-scale=1.0">，导致移动端视口宽度不是你写的 768px，而是 980px 或更大 - DevTools 的响应式模式模拟不准，特别是 orientation 切换或 DPR 变化，必须真机刷新 + 清缓存后看 Network 面板实际请求了哪个地址
-
<picture></picture>只对图片有效，<video></video>或<audio></audio>里写media基本无效，别指望它做音视频响应式
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
