media属性仅控制样式是否启用，不阻止资源下载；真正按需加载需用JavaScript动态插入link或结合preload。
media属性只控制样式是否生效，不控制资源是否下载
浏览器遇到 <link rel="stylesheet" href="print.css" media="print"> 时，仍会下载 print.css（除非是动态插入或 preload 配合），只是不会在屏幕视口下应用它。这和很多人直觉相反——以为 media 能“按需加载”，其实它只是“按需启用”。
常见错误现象：Network 面板里看到所有 link 样式都发了请求，但页面没变；或者误以为加了 media="screen and (max-width: 768px)" 就能省掉大屏 CSS 的加载，结果发现小屏设备也下了两份。
- 所有静态
<link>在 HTML 解析阶段就会触发预加载，与media值无关 -
media仅影响 CSSOM 构建：匹配失败时，该样式表不参与计算，但已下载、已解析（部分浏览器会跳过解析） - 真正“不下载”的方案只能靠 JS 动态创建
<link>或用<link rel="preload">+ JS 判断后切换
用 JavaScript 动态加载才实现真正按需
想让小屏只加载移动端样式、桌面只加载桌面样式，必须绕开静态 <link>。核心思路是：先不写样式链接，用 JS 检测条件，再插入对应 <link>。
<script>
const mq = window.matchMedia('(max-width: 768px)');
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = mq.matches ? 'mobile.css' : 'desktop.css';
document.head.appendChild(link);
</script>
注意点：
立即学习“前端免费学习笔记（深入）”；
- 必须放在
<head>内，且最好在<title>后、其他资源前执行，避免 FOUC -
window.matchMedia支持监听变化，但样式切换需手动替换<link>元素（不能只改href） - 服务端渲染（SSR）场景下，JS 还没执行时无样式，需配合
<noscript>回退或服务端判断
media 属性仍有不可替代的实用场景
虽然它不阻止下载，但在响应式设计和打印适配中依然关键。它的价值在于零 JS 依赖的样式隔离，尤其适合渐进增强或 JS 失效环境。
典型用法：
-
<link rel="stylesheet" href="print.css" media="print">：确保打印预览时只用这份样式，且不影响屏幕渲染逻辑 -
<link rel="stylesheet" href="dark.css" media="(prefers-color-scheme: dark)">：系统级深色模式切换，无需监听事件或 JS 干预 -
<link rel="stylesheet" href="high-contrast.css" media="(forced-colors: active)">：辅助技术场景下的无障碍样式注入
这些场景下，样式文件虽被下载，但语义清晰、切换即时、兼容性好（Chrome/Firefox/Edge 均支持），比 JS 方案更轻量可靠。
preload + media 组合可优化关键路径
如果真想减少首屏阻塞，又不想放弃 media 的语义，可以用 <link rel="preload"> 提前提示浏览器，再用 JS 控制何时挂载正式 <link>。
<link rel="preload" href="mobile.css" as="style" media="(max-width: 768px)">
<link rel="preload" href="desktop.css" as="style" media="(min-width: 769px)">
<script>
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = window.matchMedia('(max-width: 768px)').matches
? 'mobile.css'
: 'desktop.css';
document.head.appendChild(link);
</script>
这样做的效果：
- 预加载器根据
media条件决定是否提前 fetch 对应资源（现代浏览器支持） - 实际样式表仍由 JS 插入，确保只加载一份
- 比纯 JS 方案多一层资源调度提示，对 LCP 等指标有轻微提升
不过要注意：preload 的 media 是提示性而非强制，不匹配时浏览器可能忽略，不能当作逻辑分支依据。
真正按需加载样式的关键，在于分清“下载”和“启用”——media 只管后者。动态插入是目前最可控的方式，但别为了省几 KB 而牺牲可访问性；有些样式，比如打印或深色模式，就该老老实实放静态 <link> 里，靠 media 做语义隔离。
