media属性在现代浏览器中会阻止CSS下载，但需满足screen and前缀、语法正确、设备环境不匹配三条件；否则降级为加载，且仅在HTML解析阶段生效。
media 属性到底会不会阻止 CSS 下载
会，但只在现代浏览器（Chrome 80+、Firefox 69+、Safari 14+）中，且必须满足三个硬性条件：写全 screen and 前缀、语法无误、设备环境明确不匹配。比如 media="screen and (max-width: 768px)" 在桌面端（视口宽度 > 768px）根本不会发出请求——Network 面板里压根看不到它。
常见错误现象：
-
media="(max-width: 768px)"缺少screen and，旧版 Safari 或 Electron 会直接忽略整条<link> -
media="mobile"是非法值，浏览器降级为media="all"，所有设备都加载 - 括号没闭合、空格多一个、用了中文逗号，同样触发降级
为什么写了 media 却还是加载了两个 CSS 文件
根本原因不是 media 失效，而是条件重叠。比如：
<link rel="stylesheet" href="mobile.css" media="screen and (max-width: 768px)"> <link rel="stylesheet" href="desktop.css" media="screen and (min-width: 768px)">
当视口宽度恰好是 768px，两个条件同时为真，浏览器并行下载两份 CSS。
立即学习“前端免费学习笔记（深入）”；
正确做法是断点切开：
- 用
max-width: 767px和min-width: 768px显式排除交集 - 加
and (orientation: portrait)进一步限定，避免横屏手机误判 - 避免用
not screen，部分 WebView 会无视
rel="preload" + media 才是真·按需加载
rel="stylesheet" 的 media 控制的是“是否应用”，而 rel="preload" 的 media 控制的是“是否发起请求”。想彻底跳过非目标设备的 fetch，必须组合使用：
<link rel="preload" as="style" href="dark-theme.css" media="(prefers-color-scheme: dark)"> <link rel="stylesheet" href="dark-theme.css" media="(prefers-color-scheme: dark)">
注意：
-
rel="preload"必须带as="style"，否则浏览器无法预判资源类型 - 只对确定不会被 JS 动态引入的样式用它，否则可能重复加载
-
rel="preload"不等于最终生效，后面仍需补rel="stylesheet"来实际应用
IE9 和 Android 4.4 WebView 的兼容性坑
IE9 及更早版本完全无视 media 属性，所有 <link rel="stylesheet"> 都会下载；Android 4.4 WebView 行为类似，且不支持动态媒体查询（窗口缩放时不会重新判断已加载的 link）。
如果你还要支持这些环境：
- 不要依赖
media做关键路径节能，把基础样式内联或合并进主 CSS - 打印样式等低频场景可继续用
media="print"，因为 IE9 本来就支持该值 - 高分辨率适配慎用
device-pixel-ratio，Android 4.4 不识别，应改用min-resolution
真正容易被忽略的是：media 屏蔽只发生在 HTML 解析阶段，一旦页面开始渲染，就再无机会干预——所以断点设计、语法严谨、preload 配合，三者缺一不可。
