是否可以使用媒体查询将CSS文件包含到另一个CSS文件中？

Question

我有一个大的CSS文件，我想在使用媒体查询的特殊情况下包含其他CSS文件。

在CSS中使用@import是否安全：

@media only screen and (max-width: 480px) {    
    @import url('/css/styles-480.css');    
}

Answer 1

在@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。但是，无论哪种方式都可以正常工作。

Answer 2

如果需要，我建议您并行下载CSS文件，而不是在CSS文件中导入：

<link media="only screen and (max-width: 480px)"
href="/css/styles-480.css" type="text/css" rel="stylesheet" />

使用@import的问题是只有在完全下载和解析包含@import的CSS文件后才会下载第二个文件。无论您是否覆盖所有规则或某些规则，此方法都会更快，因为它不会按顺序加载文件。