media属性仅控制css是否应用而非是否下载，浏览器仍会预加载media非匹配的样式表；真正按需加载需结合matchmedia()动态插入link标签并设置media值。
media属性不加载CSS的原理是什么
media 属性本身不会“按需加载”，它只控制样式表是否**被浏览器应用**。当 <link rel="stylesheet" href="print.css" media="print"> 出现在 HTML 中，浏览器仍会**下载该 CSS 文件**（除非是 media="print" 且在非打印上下文中，部分浏览器会延迟加载），但不会将其用于当前视口的渲染。真正实现“按需加载”需要配合 media + 动态插入 + 媒体查询匹配逻辑。
关键点在于：media 是样式启用开关，不是网络请求开关；要减少初始加载量，得靠 JS 控制何时插入 <link> 标签。
用 matchMedia() + 动态 <link> 实现条件加载
适用于响应式断点、暗色模式切换、设备类型判断等场景。核心是监听媒体查询变化，仅在匹配时插入对应 CSS。
常见做法：
- 先定义
<link rel="stylesheet" href="dark.css" media="(prefers-color-scheme: dark)">—— 这种写法浏览器会预加载，但不生效，不够“按需” - 更精准的做法：初始不放
<link>，用matchMedia()检测，匹配后再动态创建并插入 - 示例：只在宽屏设备加载桌面版布局 CSS
const mql = window.matchMedia('(min-width: 768px)');
function loadDesktopCSS() {
if (!document.getElementById('desktop-css')) {
const link = document.createElement('link');
link.id = 'desktop-css';
link.rel = 'stylesheet';
link.href = '/css/desktop.css';
document.head.appendChild(link);
}
}
if (mql.matches) loadDesktopCSS();
mql.addEventListener('change', e => e.matches && loadDesktopCSS());
注意：不要在 change 回调里重复插入，需加 ID 判断或用 removeEventListener 配合清理逻辑。
media="print" 和 media="screen" 的加载行为差异
这是最容易误解的一点：很多开发者以为 media="print" 就完全不下载，其实不然。
- Chrome 和 Firefox 在页面加载时仍会发起
print.css的请求（HTTP Archive 数据显示约 85% 的 print CSS 被下载） - 只有 Safari 对
media="print"有较激进的延迟策略，可能等到用户触发打印时才拉取 -
media="screen"是默认值，显式写出无意义；而media="all"等价于screen，但语义更宽泛 - 真正阻止下载，只能靠不写入 DOM 或用 JS 延迟插入
移动端适配中容易踩的坑
在 iOS Safari 或 Android WebView 中，matchMedia() 对 (max-width) 的响应可能滞后于视觉缩放或地址栏收起——导致 CSS 加载时机错位。
- 避免只依赖
window.innerWidth，它受缩放影响；优先用matchMedia - 不要监听
resize事件来替代matchMedia，因为 resize 不代表媒体查询状态改变（例如横竖屏切换时，resize可能不触发） - 对
(hover: hover)或(any-hover: hover)这类交互特性检测，iOS Safari 返回false即使支持触控+外接鼠标，需 fallback - 动态插入的 CSS 文件如果体积大，可能造成 FOUC（闪白），建议配合
onload事件做 loading 状态控制
最常被忽略的是：动态插入的 <link> 缺少 media 属性本身——这会让它立刻生效，失去条件性。务必记得设置 link.media = '...'，哪怕只是临时设为 'not all' 再切回来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
