如何让min-width媒体查询生效？@import在@media中无法加载样式文件

问题根源 #

CSS语法明确规定：@import 规则必须放在样式表的最开头——只能在@charset之后，其他所有CSS规则（包括@media）之前，不能嵌套在@media内部，这就是你当前写法无法加载样式文件的原因。

三种可行解决办法 #

1. 把媒体查询作为@import的附加条件（推荐）

修改主CSS文件，将媒体查询直接写在@import语句末尾：

@charset "UTF-8";
/* 引入基础样式 */
@import url("body.css");
/* 仅当屏幕宽度≥500px时引入该样式文件 */
@import url("screen_layout_small.css") screen and (min-width: 500px);

这种写法完全符合CSS规范，浏览器会自动根据屏幕条件判断是否加载目标文件。

2. 使用<link>标签替代@import（更灵活）

直接在HTML的<head>区域添加样式链接，利用media属性指定媒体查询条件：

<link rel="stylesheet" href="body.css">
<link rel="stylesheet" href="screen_layout_small.css" media="screen and (min-width: 500px)">

这种方式在性能和兼容性上表现更优，也更便于后续维护不同屏幕尺寸的样式文件。

3. 将媒体查询移到目标样式文件内部

修改screen_layout_small.css的内容，把媒体查询包裹住样式代码：

@charset "UTF-8";

@media (min-width: 500px) {
  body {
    background-color: red;
  }
}

然后在主CSS里直接引入该文件即可：

@charset "UTF-8";
@import url("body.css");
@import url("screen_layout_small.css");

这种方式适合把媒体查询逻辑和对应样式放在一起管理的场景。

内容的提问来源于stack exchange，提问作者Mathieu Dijkstra