Media Queries仅控制样式生效条件，不加载CSS文件；真正按需加载需用<link media>或JS动态加载，注意兼容性、路径正确性及构建工具配置。
Media Queries 本身不引入 CSS 文件，只控制已有样式是否生效；真要按设备加载不同 CSS，得用 <link media> 或 JS 动态插入。
为什么 @media 规则没让手机端样式生效
常见错误是以为写了 @media (max-width: 768px) { ... } 就能“切换”一套新样式，其实所有规则都随主 CSS 文件一起下载了，只是在不匹配时被浏览器忽略。所以：手机端没变样，往往是因为断点写错了、视口没设、或者样式被更高优先级规则覆盖。
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">缺失——这是前提，没有它，@media基本失效 - 断点值和设备实际视口宽度对不上：比如用
max-width: 480px但现代手机竖屏视口常是375px或414px（iPhone），建议从576px或768px起手更稳妥 - 嵌套过深或选择器权重太高，导致小屏规则被 PC 规则覆盖（例如
.header .nav ul li a比@media ... .nav a权重高）
如何用 <link media> 真正按需加载 CSS 文件
这才是“引入适配 CSS”的正确姿势：浏览器只在媒体查询匹配时才发起请求，不匹配就完全不下载——省流量、减首屏阻塞。
- 确保多个
<link>的media属性互斥，避免重复加载：<link rel="stylesheet" href="mobile.css" media="(max-width: 767px)"><link rel="stylesheet" href="desktop.css" media="(min-width: 768px)"> - 路径必须准确，
href写错不会报错，只会静默失败（Network 面板里看不到请求） - IE9 及以下会无视
media属性，无条件加载全部 CSS；如需兼容，得 fallback 到 JS 检测 +document.write
动态加载 CSS 时 onload 不触发怎么办
用 JS 插入 <link> 后监听 onload 是常见写法，但在 Firefox 和旧版 Safari 中，CSS <link> 的 onload 事件根本不会触发——它们只对 <script> 有效。
立即学习“前端免费学习笔记（深入）”；
- 正确做法是轮询检查
link.sheet.cssRules是否可读：if (link.sheet && link.sheet.cssRules.length > 0) - 更健壮的判断是结合
link.sheet && link.sheet.href存在，再加setTimeout重试（最多 3–5 次） - 不要依赖
document.styleSheets.length变化来判断，它在某些 WebView 下不可靠
真正容易被忽略的是：断点数值不是硬编码出来的，而是由你项目中实际支持的设备视口范围决定的；@media 是开关，<link media> 才是闸门——前者管“用不用”，后者管“下不下载”。
