media queries仅控制样式生效条件，不加载css文件；真正按需加载需用或js动态加载，注意兼容性、路径正确性及构建工具配置。
Media Queries不能“加载”CSS文件，只能控制样式生效条件
很多人以为 @media 能像 <link> 一样“加载”不同CSS，其实它只是开关——所有规则仍随主文件下载，仅在匹配时应用。真想按设备拉取不同资源，得靠HTML层面的条件引入或JS动态加载。
常见错误现象：Failed to load resource 却查不到网络请求；手机端样式没变，但开发者工具里 @media (max-width: 768px) 明明写了；用 display: none 隐藏PC组件，结果移动端仍下载了大图和JS。
- 使用场景：需要真正减少移动端HTTP请求数、规避高分辨率图片/字体下载、或隔离不兼容的CSS特性（如
subgrid） - 参数差异：
@media中的min-width/max-width基于视口（viewport），不是设备像素比；screen和print是媒体类型，不是断点依据 - 性能影响：滥用嵌套
@media会拖慢CSS解析，尤其在低端Android WebView中；建议把断点提取为变量，避免重复写(min-width: 480px)
真正按需加载CSS文件：用 <link media> + 媒体查询属性
HTML原生支持在 <link> 标签上直接写 media 属性，浏览器只在匹配时才下载该CSS。这是最轻量、无需JS的方案。
示例：
<link rel="stylesheet" href="base.css"><br><link rel="stylesheet" href="mobile.css" media="(max-width: 767px)"><br><link rel="stylesheet" href="desktop.css" media="(min-width: 768px)">
- 注意：多个
<link>的media必须互斥，否则可能同时触发下载（比如漏掉and (orientation: portrait)导致横屏手机也加载mobile.css） - 兼容性：IE10+ 支持，但IE9及以下会忽略
media并无条件加载所有CSS——若需兼容，得回退到JS检测 +document.write - 路径必须准确：如果
mobile.css在子目录，href写错会导致404，但不会报错，只静默失败
动态加载时别踩 load 事件陷阱
用JS加载CSS（例如适配暗色模式切换后重载主题），常有人监听 link.onload，但这在Firefox和旧版Safari中不触发——它们只对JS脚本抛 load，对CSS是静默的。
正确做法是轮询 document.styleSheets 或监听 link.sheet.cssRules 是否可读：
const link = document.createElement('link');<br>link.rel = 'stylesheet';<br>link.href = 'dark-theme.css';<br>document.head.appendChild(link);<br><br>// 等待sheet就绪<br>const checkLoaded = () => {<br> if (link.sheet && link.sheet.cssRules.length > 0) {<br> console.log('CSS loaded');<br> } else {<br> setTimeout(checkLoaded, 50);<br> }<br>};<br>checkLoaded();
- 容易踩的坑：
link.sheet在跨域CSS或CSP限制下为null，此时轮询会无限执行 - 不要用
link.addEventListener('load', ...)期望它在所有浏览器中工作 - 如果CSS含
@import，cssRules可能延迟出现，轮询间隔建议不小于30ms
响应式文件名设计：别让构建工具误判
有些团队喜欢用 style.mobile.css、style.desktop.css 这类命名，再配合Webpack或Vite的自动处理。但问题在于：构建工具默认不识别这种语义，除非显式配置 assetRule 或 rollup-plugin-styles。
- 真实场景：Vite中直接 import
./style.mobile.css，开发时正常，但build后发现未被压缩或未加hash——因为默认只处理.css后缀，不处理带点的复合后缀 - 解决方法：在
vite.config.ts中扩展assetsInclude，或统一用style-mobile.css（短横线）替代点号 - 路径别写死：如果用
import('./theme/' + device + '.css')动态导入，ESBuild/Vite可能无法静态分析，导致该CSS不进打包产物
断点值本身没有魔法，真正卡住人的往往是 viewport 设置是否正确、CSS优先级是否被意外覆盖、以及你以为没加载的文件其实早就被 <link rel="preload"> 提前抓走了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
