media属性值错误会导致样式表完全不加载，浏览器直接忽略该link标签；常见错误如meda="screen"、media="screeen"、media="mobile"等，可通过开发者工具Elements面板查看属性是否被划掉或Network面板确认CSS是否发起请求。
media 属性值写错会导致样式完全不生效
当 link 标签的 media 属性值（如 screen、print、all）拼写错误或使用了浏览器不识别的类型时，浏览器会直接忽略该样式表，连解析都不会进行。这不是“样式没显示”，而是“压根没加载”。常见错误包括：meda="screen"（少了个 i）、media="screeen"、media="mobile"（非标准媒体类型）。
验证方式很简单：打开开发者工具 → Elements 面板 → 找到对应 link 标签 → 看其 media 属性是否被划掉（表示无效），或直接检查 Network 面板里该 CSS 文件是否发起请求（若未请求，基本就是 media 拦截了）。
用 @media 查询替代 link[media] 更易调试
相比在 HTML 中靠 link[media] 控制加载时机，把媒体条件移到 CSS 内部用 @media 声明，能避免“样式表不加载”这种静默失败。即使媒体条件不匹配，CSS 文件仍会被下载和解析，只是规则块被跳过——这样你至少能在 Styles 面板里看到它，方便检查断点、伪类、嵌套逻辑等。
例如：
立即学习“前端免费学习笔记（深入）”；
@media (max-width: 768px) {
.header { display: none; }
}
比下面这种更可控：
<link rel="stylesheet" href="mobile.css" media="max-width: 768px">
后者因 media 值格式错误（缺括号、缺关键字）会直接失效；前者即使写错，也只影响该块生效，不影响其他规则。
常见 media 值错误与对应表现
以下 media 值在 link 标签中使用时，行为差异明显：
-
media="all"：始终加载，最安全兜底 -
media="screen"：仅在屏幕设备（含桌面、手机、平板）加载；打印预览时跳过 -
media="print"：仅在打印或打印预览时加载；页面正常浏览时不加载 -
media="(min-width: 768px)"：语法错误！link[media]不支持带括号的媒体条件表达式，必须用@media写在 CSS 里 -
media="not screen"：合法但极少用，表示“非屏幕设备”，比如盲文阅读器；普通浏览器下通常不匹配，样式不加载
排查时优先检查 media 是否被浏览器主动屏蔽
某些浏览器（尤其是 Safari 和旧版 Edge）对不标准的 media 值更严格，哪怕只是多一个空格（如 media=" screen "）也可能导致整条 link 被忽略。Chrome 相对宽容，但不要依赖它。
实际排查步骤建议：
- 复制
link的media值，粘贴进控制台运行window.matchMedia("your-value").matches—— 若报错或返回false且不符合预期，说明值本身有问题 - 临时删掉
media属性，看样式是否立刻出现；如果出现，问题就锁定在媒体类型上 - 注意大小写：
Media="screen"（首字母大写）是无效的，HTML 属性名不区分大小写，但值是区分的 ——SCREEN和screen在规范中等价，但部分老旧 UA 可能有差异，统一小写最稳妥
真正麻烦的不是写错，而是写错后没有任何提示——它就安静地不工作。所以只要样式突然消失又查不到具体规则，先盯住 media 属性。
