媒体查询必须写在CSS文件或<style>标签内，而非<link>的media属性中；后者仅控制样式表是否加载，不参与样式逻辑。
媒体查询本身不通过 <link> 的 media 属性“引入”，而是写在 CSS 文件里或 <style> 标签中。但你可能混淆了两种不同用途的 media：一种是 HTML 中 <link> 标签的 media 属性（用于条件加载整个样式表），另一种才是真正的 CSS 媒体查询（@media 规则）。下面分清楚讲。
link 的 media 属性不是媒体查询，只是加载开关
它只控制「这个 CSS 文件是否被浏览器下载并解析」，不参与样式逻辑运算：
-
<link rel="stylesheet" href="mobile.css" media="screen and (max-width: 768px)">：只有当设备满足条件时，才加载 mobile.css；否则完全忽略该文件 -
<link rel="stylesheet" href="print.css" media="print">：仅在打印预览或调用打印时生效，不影响屏幕显示 - 注意：这种写法无法做精细响应（比如横竖屏切换、宽高比变化），也不支持嵌套或动态更新，且现代项目中极少单独依赖它来做响应式
CSS 媒体查询必须写在样式内部
真正起作用的媒体查询是 CSS 规则，必须放在 .css 文件或 <style> 里：
- 正确写法：
@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，而不是 <link media>：
- 想做响应式布局 → 写
@media在主样式里 - 想分离打印样式 → 可用
<link media="print">，但内容仍需完整定义 - 想按设备类型加载不同主题（如深色/浅色）→ 用
@media (prefers-color-scheme: dark)，不是 link media - 需要兼容极老浏览器（IE9-）且必须拆文件 → 才考虑
link media，但已基本淘汰
基本上就这些。别把 link 的 media 当成媒体查询用，它们解决的是不同层级的问题。
