@import不支持媒体查询，必须用<link rel="stylesheet" media="screen and (max-width: 768px)">引入移动端样式，或直接在主CSS中使用@media规则。
移动端样式被PC样式覆盖，@import没生效
直接在主CSS里用@import url("mobile.css") screen and (max-width: 768px)——这写法无效。@import不支持媒体查询条件，浏览器会忽略整个语句，或者无条件加载（取决于解析器），根本达不到“只在移动端加载”的效果。
常见错误现象：mobile.css里的规则始终不生效，DevTools里看不到该文件被加载，或看到它被加载了但样式被PC CSS覆盖（因为层叠顺序靠前却权重低）。
- 必须把
@import放在CSS文件最顶部，前面不能有任何字符（包括注释、空行、BOM） - 媒体查询只能写在
<link>标签的media属性里，不是@import的参数 - 如果非要分离文件，优先用HTML侧引入：
<link rel="stylesheet" href="mobile.css" media="screen and (max-width: 768px)">
用<link media>加载mobile.css后，样式仍不生效
不是加载失败，而是层叠优先级或选择器权重不够。比如PC CSS里写了header { padding: 20px; }，mobile.css里只写header { padding: 10px; }，但两个文件都加载了，后者会被前者覆盖——因为规则顺序和选择器一样，后加载的本该胜出，但若PC CSS是<link>在前、mobile在后，就正常；反之则失效。
- 确保
<link>标签中mobile版的HTML位置在PC版之后（DOM顺序决定层叠顺序） - 避免在mobile.css里重复写PC已定义的通用类，改用更具体的选择器，比如
.header-mobile { padding: 10px; }或body.mobile .header { padding: 10px; } - 别依赖
!important硬顶，容易引发维护混乱；真要用，只限于调试定位
想用@media替代分离文件，但担心性能或可维护性
现代项目里，把移动端规则写进主CSS的@media块里，比用@import或多个<link>更可靠、更易调试。HTTP/2下多文件并行加载优势变小，而单文件减少了请求管理复杂度。
立即学习“前端免费学习笔记（深入）”；
-
@media (max-width: 768px) { ... }写法兼容所有主流浏览器（IE9+），无需polyfill - 开发时用CSS预处理器（如Sass）配合
@mixin mobile { @media (max-width: 768px) { @content } }，保持结构清晰 - 注意
min-width和max-width逻辑：用min-width适合移动优先，max-width适合桌面优先，别混用导致断点冲突
旧项目强行保留@import分离，怎么让它真正按条件加载
唯一合规方式是放弃“一个CSS文件里用@import加媒体查询”，改为服务端或构建时处理：比如Webpack中用mini-css-extract-plugin按环境输出不同CSS，或后端模板根据User-Agent动态注入<link>。纯前端CSS做不到条件@import。
- 不要尝试
@import url("mobile.css") only screen and (max-width: 768px)——only关键字不改变语法限制，依然无效 - 检查network面板，确认
mobile.css是否真的发出了请求；没发请求说明@import被跳过，发了但没生效说明是层叠问题 - 移动端调试务必用真实设备或Chrome DevTools的Device Mode + 硬件刷新（Ctrl+F5），缓存常导致CSS未更新
分离CSS文件听着模块化，但@import的媒体查询限制是个死结。真要拆，就用<link media>；想省事又可控，就老实用@media。很多人卡在“以为@import能条件加载”这一步，其实从规范上它就不支持。
