现代浏览器在media值明确不匹配时确实不发起css请求，但需写全媒体类型和特性、语法正确，且ie9及旧webview会无视media；多个link的media条件需互斥，preload+media才能真正按需加载。
media属性到底会不会阻止CSS下载
现代浏览器（Chrome 80+、Firefox 69+、Safari 14+）在 media 值**明确不匹配当前环境**时，真的不会发请求——不是“下了但不用”，而是压根不 fetch。比如：<link rel="stylesheet" href="mobile.css" media="screen and (max-width: 768px)"> 在桌面端（视口宽度 > 768px）的 Network 面板里根本看不到该请求。
但这个行为有前提：
- 必须写全媒体类型 + 媒体特性，
media="(max-width: 768px)"缺少screen类型，旧版 Safari 或 Electron 可能直接忽略整条<link> - 语法不能出错：多一个空格、括号没闭合、用了非法值（如
media="mobile"），浏览器会降级为media="all"，导致无条件加载 - IE9 及更早版本完全无视
media，所有 CSS 都下载；Android 4.4 WebView 也存在类似问题
为什么写了media却还是加载了两个CSS文件
常见原因是多个 <link> 的 media 条件没有互斥。比如：
<link rel="stylesheet" href="mobile.css" media="(max-width: 768px)"><link rel="stylesheet" href="desktop.css" media="(min-width: 768px)">
在宽度正好是 768px 的设备上，两个条件都成立，浏览器会同时下载两份 CSS。更稳妥的写法是：
-
media="(max-width: 767px)"和media="(min-width: 768px)"明确切开断点 - 加
and (orientation: portrait)等进一步限定，避免横屏手机误加载移动端样式 - 避免用
not screen，它在部分 WebView 中被忽略，推荐显式写media="print, tv"
rel="preload" + media 才是真·按需加载
rel="stylesheet" 的 media 控制的是“是否应用”，而 rel="preload" 的 media 控制的是“是否发起请求”。想真正跳过非目标设备的资源加载，优先用 preload：
<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)">
这样写，深色模式未启用时，dark-theme.css 连预加载都不会触发。注意：
-
rel="preload"必须配as属性，否则浏览器无法预判资源类型 - 只对明确不会被 JS 动态引用的资源用它，否则可能重复加载
- 不要把
rel="preload"当成最终样式引入，后面仍需补一个rel="stylesheet"来实际应用
JS动态改media值后样式不生效
改 link.media 不会触发重加载——浏览器只在元素插入 DOM 时检查一次 media。所以手动切换后必须重建节点：
const link = document.querySelector('link[data-id="theme"]');
link.media = '(min-width: 1024px)';
link.remove();
document.head.appendChild(link);
其他容易踩的坑：
- 用
link.disabled = true/false替代移除/插入，在 Safari 中偶有缓存残留，不可靠 - 先改
href再改media，可能触发冗余请求（新 href 被拉取，但因 media 不匹配又被取消） -
<style media=""></style>的media值 JS 修改无效，它只在解析 HTML 时起作用
真正容易被忽略的是：你删掉一个 <link media>，并不等于省掉一次请求——如果写法错误或兼容性 fallback 生效，它照常下载；而把所有断点塞进单个 CSS 文件，反而更容易控制层叠顺序、避免重复下载、也更利于构建工具做 CSS 压缩和缓存复用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
