CSS中@import不支持媒体查询，应改用HTML的<link>标签配合media属性实现条件加载，如mobile.css和desktop.css分别设置max-width: 768px与min-width: 769px，且移动端link需置于PC端前。
用 @import 在 CSS 里条件引入文件行不通
直接在 CSS 文件中用 @import url("mobile.css") screen and (max-width: 768px) 是无效的。CSS 规范不支持为 @import 添加媒体查询条件——浏览器会忽略媒体条件，无条件加载该文件，或直接报解析错误（取决于实现）。
正确做法：在 HTML 的 <link> 标签上加 media 属性
这是最可靠、兼容性最好、且被所有现代浏览器（包括 iOS Safari、Chrome Android）支持的方式。关键点是把媒体查询逻辑放在 HTML 层，而不是 CSS 层。
-
media值为screen and (max-width: 768px)表示仅在视口宽度 ≤ 768px 时加载并应用该样式表 -
media="screen and (min-width: 769px)"对应 PC 端，注意避免和移动端断点重叠（比如别写成min-width: 768px） - 两个
<link>可共存，浏览器只下载并解析匹配当前环境的那一个 - 务必把移动端
<link>放在 PC 端前面，确保小屏设备优先拿到对应样式（虽不影响加载，但符合直觉）
<link rel="stylesheet" href="common.css"> <link rel="stylesheet" href="mobile.css" media="screen and (max-width: 768px)"> <link rel="stylesheet" href="desktop.css" media="screen and (min-width: 769px)">
为什么不用 JS 动态加载？
有人想用 JS 检测 window.innerWidth 再插入 <link>，这会导致 FOUC（Flash of Unstyled Content），尤其在弱网或低端安卓机上明显。原生 media 属性由浏览器底层控制，加载时机更早、更稳定。
- JS 方案无法响应横竖屏切换（除非监听
resize并反复替换，开销大且易出竞态） -
media属性天然支持响应式重计算（如旋转屏幕、缩放页面） - 服务端无法感知 JS 加载逻辑，不利于 SSR 或预渲染场景
断点值选多少才合理？
别死守 768px。iPad Pro 宽度是 1024px，很多安卓平板是 800px，而 iPhone 14 Pro Max 横屏也有 932px。实际建议：
立即学习“前端免费学习笔记（深入）”；
- 用
max-width: 767px区分「典型手机竖屏」，避免和 iPad 竖屏混淆 - PC 端用
min-width: 768px会意外命中 iPad 竖屏，改用min-width: 1024px更稳妥（覆盖多数桌面+大平板） - 留一个中间层：用
screen and (min-width: 768px) and (max-width: 1023px)单独处理平板 - 如果项目已用 rem/vw + flex/grid，可能根本不需要拆文件，纯靠单 CSS 内
@media就够了
media 属性只控制「是否应用样式」，不控制「是否下载资源」。部分浏览器（如旧版 Chrome）仍会预加载不匹配的 CSS 文件（尽管不解析）。若文件体积大、网络差，得考虑合并 + 内联关键样式，或改用 JS 动态 import（但那是另一类权衡了）。 
