推荐优先使用 <link media> 控制样式表加载，其根据媒体查询条件决定是否应用；@import 因阻塞解析且无法动态管理而不推荐；需运行时判断时应通过 JS 动态创建并插入 <link>。
用 <link> 的 media 属性控制样式表是否加载
直接在 HTML 中通过 <link> 标签的 media 属性指定媒体查询条件，浏览器会根据当前环境判断是否下载并应用该 CSS 文件。
-
media值为不匹配的媒体查询（如media="print"在屏幕浏览时）时，样式表仍可能被下载（取决于浏览器），但不会应用于渲染树 - 若值为
media="not all"或语法错误的查询，大多数现代浏览器会跳过下载 - 推荐使用明确、标准的媒体特性，例如
media="(max-width: 768px)"、media="screen and (prefers-color-scheme: dark)"
用 @import 在 CSS 内部做条件引入（不推荐）
@import 支持媒体查询语法，但存在严重限制：它必须写在样式表最顶部（除 @charset 外），且会阻塞后续规则解析，还可能触发额外 HTTP 请求。
@import url("mobile.css") (max-width: 480px);
@import url("dark-theme.css") (prefers-color-scheme: dark);
- 无法在 JS 中动态切换或取消加载已导入的样式表
- 所有
@import规则都会在初始 CSS 解析阶段被处理，无法实现“按需懒加载” - Chrome 已在 DevTools 的 Network 面板中标记
@import加载的资源为“blocking”，影响 LCP 等指标
真正按需加载：用 JS 动态创建 <link> 并检查条件
当需要精确控制加载时机（比如用户切换主题后才拉 dark.css）、避免预加载无用资源，或依赖运行时 JS 判断（如 UA、localStorage 状态），就得手动操作 DOM。
- 先用
window.matchMedia()检查当前是否满足条件 - 满足时再创建
<link rel="stylesheet">并设href，插入到<head> - 记得给
<link>加id或其他标识，方便后续卸载（如切换回 light 主题时remove()）
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = '/css/dark.css';
link.id = 'dark-theme';
document.head.appendChild(link);
}
注意 media 不等于“CSS 作用域”
<link media="..."> 只控制该文件是否参与渲染，不改变其内部选择器的作用范围。哪怕 media="print"，里面写的 body { background: red } 在打印预览里生效，但在屏幕页面里完全不可见——不是“失效”，是根本没进样式计算流程。
立即学习“前端免费学习笔记（深入）”；
- 不要指望靠
media来隐藏敏感样式逻辑（比如把暗色模式变量写在media="screen"里就认为安全） - 服务端渲染时，
media属性对 SSR 无意义，它纯属客户端行为 - 部分旧版 iOS Safari 对复杂媒体查询（如嵌套
and+not）支持不稳定，建议用简单组合并加测试
<link media> 最稳妥；涉及用户交互或状态变化的场景，JS 动态加载更可控。别让 @import 偷偷拖慢首屏。 
