最稳妥的做法是用标签的media属性按屏幕宽度条件加载CSS，浏览器原生支持、无JS依赖、不闪屏；max-width适合移动端优先，min-width利于渐进增强，避免device-width，断点需无缝衔接，@import在媒体查询内不可靠。
直接用 标签的 media 属性就能按屏幕宽度条件加载 CSS，浏览器原生支持、无 JS 依赖、不闪屏——这是最稳妥的做法。
用 media 属性控制
浏览器会解析 media 值，只对匹配当前视口的样式表发起高优先级请求；不匹配的仍可能触发低优先级预加载（尤其在 Chrome 中），但不会阻塞渲染或应用规则。
-
max-width适合“移动端优先”场景，比如 -
min-width更利于渐进增强，如 - 避免用
device-width，它依赖设备物理像素，易被缩放、UA 欺骗干扰；始终用width（即视口宽度） - 多个
可共存，但断点必须无缝衔接，否则中间宽度可能无样式生效，例如：(max-width: 480px)和(min-width: 481px) and (max-width: 1023px)
为什么不用 @import 在 CSS 里条件引入外部文件
@import 在媒体查询内虽语法合法（如 @media (max-width: 768px) { @import "mobile.css"; }），但实际中几乎不可用：所有主流浏览器都会忽略媒体条件，无条件加载该文件，完全失去“条件性”。
- 这是 CSS 规范明确允许但实现普遍不支持的行为，不能当作可靠方案
- 即使加载成功，
@import会阻塞后续 CSS 解析，拖慢样式应用 - 现代构建工具（如 PostCSS、Vite）也不处理媒体查询内的
@import，容易导致构建时丢失引用
当需要动态切换样式表时，JavaScript 怎么做才不翻车
只有在需要运行时响应用户操作（如手动切“阅读模式”）、或服务端无法决定初始断点时，才考虑 JS 动态插入。否则纯 media 属性更轻量。
- 不要用
document.write或直接innerHTML插入，会清空已有样式 - 正确做法是创建
元素，设好href和media，再appendChild到 - 务必监听
resize事件并节流（如 100ms 一次），否则频繁触发会卡顿；更推荐用matchMedia()监听特定断点变化 - 动态插入的样式表没有预加载提示，首屏关键样式建议仍用静态
+media
真正容易被忽略的是：多个 的加载顺序会影响层叠权重，哪怕它们的 media 不重叠，也建议按从窄到宽（max-width 递增）或从宽到窄（min-width 递增）排列，避免意外覆盖。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
