17370845950

媒体查询必须写在CSS文件或标签内，而非的media属性中；后者仅控制样式表是否加载，不参与样式逻辑。

媒体查询本身不通过 的 media 属性“引入”，而是写在 CSS 文件里或 标签中。但你可能混淆了两种不同用途的 media：一种是 HTML 中 标签的 media 属性（用于条件加载整个样式表），另一种才是真正的 CSS 媒体查询（@media 规则）。下面分清楚讲。

link 的 media 属性不是媒体查询，只是加载开关

它只控制「这个 CSS 文件是否被浏览器下载并解析」，不参与样式逻辑运算：

• ：只有当设备满足条件时，才加载 mobile.css；否则完全忽略该文件
• ：仅在打印预览或调用打印时生效，不影响屏幕显示
• 注意：这种写法无法做精细响应（比如横竖屏切换、宽高比变化），也不支持嵌套或动态更新，且现代项目中极少单独依赖它来做响应式

CSS 媒体查询必须写在样式内部

真正起作用的媒体查询是 CSS 规则，必须放在 .css 文件或 里：

• 正确写法：@media screen and (max-width: 768px) { .header { font-size: 14px; } }
• 常见错误：@mediascreenand (max-width:768px){...}（漏空格、缺 @ 符号、无空格、括号紧贴 and）
• 必须确保该 CSS 已被正常加载（检查 network 面板看文件 200 状态，路径是否拼错）

为什么 link media 看起来“没反应”？

因为它的行为和你预期的不一样：

• 它不改变已有样式，只决定“要不要加载那个文件”——如果文件没加载，里面所有样式都不存在
• 移动端测试时，若用桌面浏览器模拟，link media 可能因 UA 或模拟精度问题误判，导致文件未加载
• 没有 fallback：如果条件不匹配，又没提供默认样式表，页面就彻底没样式
• 推荐做法：只用一个主 CSS 文件，在其中写 @media 查询，更可控、易调试

实用建议：怎么选？

日常开发中优先用 CSS 内部的 @media，而不是 ：

• 想做响应式布局 → 写 @media 在主样式里
• 想分离打印样式 → 可用 ，但内容仍需完整定义
• 想按设备类型加载不同主题（如深色/浅色）→ 用 @media (prefers-color-scheme: dark)，不是 link media
• 需要兼容极老浏览器（IE9-）且必须拆文件 → 才考虑 link media，但已基本淘汰

基本上就这些。别把 link 的 media 当成媒体查询用，它们解决的是不同层级的问题。