media属性只控制CSS是否启用，不阻止资源加载；真正按需加载需用JavaScript监听matchMedia()动态切换link的disabled状态。
media属性写在link标签里，但资源仍会加载
浏览器遇到 <link rel="stylesheet" href="print.css" media="print"> 时，不会阻止下载，只是延迟应用样式。这意味着即使用户从不打印，print.css 依然被请求、解析、甚至可能触发 FOUC 或阻塞渲染（尤其在旧版 Safari 和部分 Android WebView 中）。
常见错误现象：Network 面板看到 print.css 明明没用却始终在加载；Lighthouse 报告提示“未使用的 CSS”；首屏渲染变慢。
- 真正按需加载必须靠 JS 控制
link的disabled状态或动态插入 -
media属性只影响“是否启用”，不控制“是否获取” - 若 CSS 文件体积大、且仅用于特定场景（如
prefers-reduced-motion或screen and (min-width: 1200px)），仅靠media不足以优化
用 JavaScript 动态加载 media 匹配的 CSS
想实现真正的“按需加载”，得等媒体查询匹配后再拉取资源。核心是监听 matchMedia()，并在回调中操作 link 元素。
使用场景：响应式主题切换、暗色模式初始化、打印前预加载专用样式、无障碍偏好适配。
立即学习“前端免费学习笔记（深入）”；
示例逻辑：
const mq = window.matchMedia('(max-width: 768px)');
const linkEl = document.querySelector('link[data-media-query="(max-width: 768px)"');
if (mq.matches) {
linkEl.disabled = false;
} else {
linkEl.disabled = true;
}
mq.addEventListener('change', (e) => {
linkEl.disabled = !e.matches;
});
-
link标签需提前写入 HTML，但初始设为disabled="true"或用data-*属性标记用途 - 不要在
change回调里重复fetch()或appendChild()—— 资源已存在，只需开关启用状态 -
matchMedia()在 IE10+ 支持，但 IE 不支持addEventListener，需用addListener回退
media 属性和 @import 的组合陷阱
在 CSS 文件内部用 @import url("theme.css") screen and (prefers-color-scheme: dark);，看起来更“语义化”，但实际风险更大。
问题本质：@import 是同步阻塞的，即使带 media，浏览器仍会下载并解析整个导入链，且无法被 preload 或预连接优化。
- 所有主流浏览器都忽略
@import后面的media条件，直接加载（Chrome 90+ 开始部分支持，但兼容性差） - 调试时容易误判：Network 面板看到请求了，就以为“按需”生效了，其实不是
- 替代方案：把条件拆到 HTML 层，用多个
<link>+ JS 控制disabled，或改用 CSS 自定义属性 + JS 切换类名
preload 不能绕过 media 的加载限制
有人尝试加 <link rel="preload" as="style" href="mobile.css" media="screen and (max-width: 768px)">，期望只在匹配时预加载。结果发现：preload 会无视 media 属性，直接发起请求。
这是规范行为 —— rel="preload" 的 media 仅用于决定是否执行 as 类型解析，不控制是否发起网络请求。
- Chrome、Firefox、Safari 均如此，无例外
- 若你真需要预加载某媒体查询下的资源，只能 JS 检测后手动
new Image().src = ...或fetch()缓存，再注入link - 更稳妥的做法：把关键 CSS 内联，非关键的延迟加载，别依赖
media做资源调度
