我有一个很大的 CSS 文件，我想在使用媒体查询的特殊情况下包含其他 CSS 文件。
像这样在 CSS 中使用@import 是否安全：
@media only screen and (max-width: 480px) {
@import url('/css/styles-480.css');
}
【问题讨论】：
标签： css media-queries
@import 在 @media 规则中是无效的，所以你所拥有的将不起作用。
正确的做法更简单——@import 本身在 URL 之后接受媒体查询：
@import url('/css/styles-480.css') only screen and (max-width: 480px);
这个语法是introduced in CSS2.1 for use with media types，但是media queries will also work，因为它们是媒体类型的直接扩展。
请记住，@import 规则只能存在于样式表的开头。
如果您担心加载性能，您可能希望在页面标题中使用单独的<link> 元素来引用此样式表，而不是@import、as shown by Asad。但是，无论哪种方式都可以正常工作。
【讨论】：
如果需要，我建议您并行下载 CSS 文件，而不是在 CSS 文件中导入：
<link media="only screen and (max-width: 480px)"
href="/css/styles-480.css" type="text/css" rel="stylesheet" />
使用@import的问题是，第二个文件只有在包含@import的CSS文件被完全下载并解析后才会下载。无论您是覆盖所有规则还是部分规则，这种方法都更快，因为它不会按顺序加载文件。
【讨论】：
@import 所在的样式表包含 OP 无论如何都需要加载的其他样式，那么将 @import 从该样式表中移出不会有任何影响。跨度>
@import 覆盖了所有当前规则
@import 仅在 CSS 文件完全下载和解析后才会启动。这意味着文件按顺序加载。
@import 更快，但它并不总是保存 HTTP 请求。