浏览器对link标签的media属性是硬过滤：不匹配则完全不发起请求，network面板中不会出现对应css文件；常见错误包括语法不规范、rel值非stylesheet、动态修改media无效等。
media属性不匹配时根本不会发请求
浏览器对 link 标签的 media 属性是“硬过滤”：不匹配就跳过下载，Network 面板里压根不会出现对应 CSS 文件。这不是加载失败，而是压根没发起请求——很多人误以为是 404 或路径错，其实只是 media 写错了。
常见失效写法包括：
-
media="screen, (max-width: 768px)"—— 逗号表示“或”，但screen和括号内不是同级类型，解析失败后降级为all -
media=" (min-width: 768px)"—— 开头多空格，部分浏览器直接忽略整段值 -
media="print"写成media="PRINT"或media=" print"—— 值必须小写且无前后空格 -
media="not screen and (orientation: landscape)"——not必须包裹整个表达式：media="not (screen and (orientation: landscape))"
调试时打开 DevTools → Network → 刷新页面，如果目标 CSS 文件完全没出现在列表里，优先检查 media 值语法是否规范。
rel="stylesheet" 是前提，其他 rel 值下 media 被忽略
media 属性只对 rel="stylesheet" 生效；写成 rel="preload"、rel="prefetch" 或漏掉 rel，浏览器根本不读 media —— 它只当普通资源处理，甚至可能连解析都不做。
容易踩的坑：
- 把
rel="preload" as="style"和media混用，以为能条件预加载：不行，preload不支持media过滤 - 动态插入
link时忘了设rel，比如link.rel = "stylesheet"没执行，标签就静默失效 -
rel="stylesheet alternate"这类多词写法在多数浏览器中等同于无效rel，必须严格单值
确认方式：选中 link 元素 → Elements 面板里看 rel 属性是否精确等于 stylesheet，且没有多余空格或字符。
media 属性不响应运行时变化
改 link.media 的值（比如从 "(max-width: 768px)" 改成 "(min-width: 1024px)"）不会触发重加载，浏览器只在 DOM 插入那一刻检查一次匹配状态。
所以 JS 动态切换主题或设备模式时：
- 别用
link.media = newMedia然后期待样式生效 - 正确做法是移除再重插：
link.remove(); document.head.appendChild(link) -
link.disabled = true/false虽轻量，但 Safari 偶有缓存残留，不能单独依赖
另外，media="(prefers-color-scheme: dark)" 这类系统级特性变更后，浏览器会自动重载匹配的 link，但前提是该 link 仍存在于 DOM 中且未被禁用。
旧环境或错误加载位置导致媒体查询被绕过
IE、旧版 Android WebView 对 media 属性支持极弱，不匹配时仍会下载 CSS；而现代浏览器中，link 若放在 里或通过 JS 动态注入（尤其在 DOMContentLoaded 之前未完成），部分浏览器会延迟解析或忽略 media 判断。
务必检查：
-
link是否严格位于内，且在<title></title>之后、其他脚本之前 - 是否用了
<meta name="viewport">—— 缺失它会导致(max-width: ...)在移动端模拟器中永远不触发 - 是否在构建工具（如 Vite）中误将 CSS 放进
public/却用相对路径引用，导致实际返回 HTML 而非 CSS（状态码 200 但 Content-Type 是text/html）
最可靠的验证方式：右键点击 link 的 href 值，在新标签页打开，确认返回的是纯 CSS 内容且 HTTP 状态码为 200、Content-Type 为 text/css。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
