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

Question

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

这样@import在CSS中使用是否安全:

@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);

这种语法在CSS2.1中引入,用于媒体类型,但媒体查询也可以使用,因为它们是媒体类型的直接扩展.

请记住,@import规则只能存在于样式表的开头.

如果你担心负载性能,您可能需要使用一个单独的<link>元素在你的页面头部引用这个样式表,而不是一个@import,如图阿萨德.但是,无论哪种方式都可以正常工作.

Answer 2

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

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

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