media属性仅对等特定标签生效，必须写在内且带括号，顺序须从宽到窄，否则浏览器静默忽略或只加载首条匹配项。
media 属性不是“让元素响应式加载”的开关，而是浏览器在解析 HTML 阶段就决定“要不要发起请求”的过滤器——不匹配，连 HTTP 请求都不会发。
为什么写了 media="(max-width: 768px)" 却没生效？
最常见原因不是逻辑错，而是语法或结构失效：
-
media写在<picture></picture>或<link>标签上 → 浏览器直接忽略；它只对<source></source>、<link>、<style></style>三类标签原生有效 -
media="max-width: 768px"缺少括号 → 必须是media="(max-width: 768px)"，否则静默退化为all -
<source></source>放在<img>后面 → 浏览器跳过全部<source></source>，只加载<img src> - 多个
media值重叠（如(min-width: 768px)和(max-width: 768px)）→ 768px 宽度会命中第一个，后面规则永不执行
<source></source> 的 media 顺序必须从宽到窄
浏览器按 DOM 顺序线性扫描 <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>→ 所有设备都卡在这条，宽屏永远拿不到高清图
<link> 的 media 不会随窗口缩放自动切换
它是静态声明，不是监听器。写成 <link href="mobile.css" media="(max-width: 480px)">，只在初始加载时起作用：
- 页面加载时匹配，就下载并应用；不匹配，连请求都不发
- 用户缩放窗口或旋转屏幕，已加载的样式不会自动替换或卸载
- 要实现动态切换，得用 JS 监听
resize或matchMedia，再手动修改link.disabled或重插节点 - 注意：IE9 及以下完全不识别带括号的媒体查询，需配
media="screen"降级
media 在音视频 <source></source> 中根本不起作用
这是极易踩坑的盲区：HTML 标准明确限定 media 属性仅对 <picture></picture> 中的 <source></source> 生效。在 <video></video> 或 <audio></audio> 里写 <source media="(min-width: 768px)"></source>，Chrome/Firefox/Safari 全部忽略。
音视频真正的匹配机制只看两件事：
-
type是否被浏览器支持（逐字符比对 MIME 类型和 codecs） - HTTP 响应头
Content-Type是否与type完全一致
想适配 iOS？别靠 media，把 H.264 MP4 放第一个 <source></source>，WebM 放后面 fallback —— 这才是稳定方案。
真正容易被忽略的是：media 的价值不在“切换”，而在“预防”——它让不匹配的资源从加载链路里彻底消失，而不是等 CSS 解析完再隐藏。写错顺序、漏括号、放错位置，都会让这个预防机制失效，变成空转的装饰。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
