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

Question

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

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

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

score 15 · Accepted Answer

@import有一个规则是无效的@media，所以你有什么是行不通的。

正确的方法更简单——@import它本身接受 URL 之后的媒体查询：

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

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

如果您关心加载性能，您可能希望<link>在页面标题中使用单独的元素来引用此样式表，而不是@import，如 Asad 所示。但是，无论哪种方式都可以正常工作。

score 4 · Accepted Answer

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

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

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

2 回答 2