答案：@import可通过媒体查询实现条件加载，如@media控制设备类型、屏幕方向等，但需置于css文件开头，性能较差且不支持复杂逻辑，建议优先使用html中link标签的media属性实现更高效加载。
在CSS中，@import 可以用来引入外部样式表，但它本身不支持像javaScript那样的动态条件判断。不过，你可以通过结合媒体查询（media query）来实现条件性加载CSS文件，也就是“满足某种条件时才加载指定的样式表”。
使用 @import 配合媒体查询进行条件加载
@import 支持在导入时指定媒体查询，只有当设备满足这些条件时，对应的CSS文件才会被下载和应用。
语法：
@import url("style-mobile.css") screen and (max-width: 768px);
这表示：只有当设备是屏幕类（如电脑、手机），且视口宽度 ≤ 768px 时，才会加载 style-mobile.css。
常见用法示例：
-
@import url("print.css") print;—— 仅在打印页面时加载 -
@import url("dark-theme.css") (prefers-color-scheme: dark);—— 用户系统设为深色模式时加载 -
@import url("landscape.css") screen and (orientation: landscape);—— 横屏时加载 -
@import url("high-res.css") screen and (min-resolution: 2dppx);—— 高分辨率屏幕（如Retina）时加载
注意事项与限制
@import 的条件加载虽然方便，但有一些重要限制需要了解：
立即学习“前端免费学习笔记（深入）”；
- 必须写在CSS文件的开头，所有
@import规则要放在其他规则（如body{}）之前 - 性能不如
<link>标签：浏览器会先下载主CSS文件，再解析里面的@import，导致延迟加载，影响页面渲染速度 - 无法实现复杂逻辑（比如“如果ie浏览器则加载”），只能依赖CSS原生支持的媒体查询
替代方案：HTML中的 link + media
对于更清晰和高效的条件加载，推荐使用HTML中的 <link> 标签：
<link rel="stylesheet" href="mobile.css" media="screen and (max-width: 768px)"> <link rel="stylesheet" href="print.css" media="print">
这种方式由浏览器直接控制，加载时机更早，性能更好。
基本上就这些。@import 实现“条件加载”的核心是借助媒体查询，适合简单场景，但要注意性能和兼容性。实际项目中，建议优先使用 <link> 方式做条件引入。不复杂但容易忽略细节。