media属性控制样式表是否被注入渲染树，而非是否下载；现代浏览器仍会下载不匹配的css以支持动态切换，其真正作用是决定规则是否参与渲染计算。
的 media 属性实现条件性样式加载">
media 属性到底控制什么，不是“只管屏幕尺寸”
media 属性决定的是「样式表是否被浏览器应用」，而不是「是否被下载」。现代浏览器（Chrome、Firefox、Safari）在绝大多数情况下仍会下载 <link rel="stylesheet"> 指向的 CSS 文件，哪怕 media 当前不匹配——这是为了支持媒体查询动态切换（比如用户旋转设备或系统切换深色模式）。所以别指望靠它省掉网络请求，它真正起作用的是「是否将规则注入渲染树」。
常见误用是写成 media="print and (min-width: 1px)" 以为能“禁用加载”，实际无效；正确做法是结合 onload 或 JS 动态插入来控制下载时机。
怎么写 media 值才能让样式只在特定条件下生效
直接写媒体查询表达式即可，无需额外包裹 screen（除非你想排除打印样式）。浏览器按标准媒体类型和特性解析，支持逻辑组合：
-
media="screen and (max-width: 768px)"：仅小屏设备启用（注意：PC 浏览器缩放窗口也会触发） -
media="print"：仅打印预览/导出 PDF 时生效 -
media="(prefers-color-scheme: dark)"：系统设为深色模式时启用（需注意 Safari 12.1+ 才稳定支持） -
media="screen and (hover: hover) and (pointer: fine)"：有精准悬停能力的设备（如带鼠标桌面端），可用来隐藏移动端不需要的 tooltip 样式
多个条件用空格分隔表示 AND，用逗号表示 OR。但注意：逗号分隔的媒体查询中只要有一个匹配，整条 <link> 就会被应用。
为什么加了 media 还是影响首屏性能？
因为 <link rel="stylesheet"> 默认具有渲染阻塞行为——无论 media 是否匹配，浏览器都会暂停 HTML 解析，等待该 CSS 加载并解析完成（除非标记为 disabled 或使用 rel="preload" 替代）。这是最常被忽略的性能陷阱。
解决方式只有两个现实选择：
- 把非关键样式改用
<link rel="preload" as="style" onload="this.rel='stylesheet'">+media，配合 JS 回调启用（注意 Safari 对onload的兼容性） - 对完全非首屏的样式（比如模态框内部样式），直接用 JS 动态创建
<link>并插入，此时media才真正延迟到需要时才评估 - 服务端根据 UA 或客户端提示（如
Sec-CH-UA-Model）直接不输出该<link>标签（最彻底，但需后端配合）
media 值写错会导致样式完全失效，怎么快速验证
打开 DevTools → Elements 面板，找到对应 <link> 标签，右键 → “Force device mode” 或手动修改系统偏好（如深色模式开关），观察其 disabled 状态是否变化。更可靠的方式是在 Console 中执行：
getComputedStyle(document.documentElement).getPropertyValue('--some-test-var')
前提是你的 CSS 中用了自定义属性做标记，例如：
@media (prefers-color-scheme: dark) { :root { --test-loaded: 1; } }
如果返回空字符串，说明 media 未匹配或 CSS 根本没加载成功。另外注意：某些旧版 iOS WebView 对 (prefers-reduced-motion) 等特性识别不稳定，建议加降级兜底。
media 不是魔法开关，它只做一件事：在 CSS 已加载的前提下，决定这些规则要不要参与渲染计算。想绕过下载或执行，得换思路。
