我有一个很大的 CSS 文件，我想在使用媒体查询的特殊情况下包含其他 CSS 文件。
@import像这样在 CSS中使用是否安全：
@media only screen and (max-width: 480px) {
@import url('/css/styles-480.css');
}
问问题
3917 次
2 回答
15
@import有一个规则是无效的@media，所以你有什么是行不通的。
正确的方法更简单——@import它本身接受 URL 之后的媒体查询：
@import url('/css/styles-480.css') only screen and (max-width: 480px);
这种语法在 CSS2.1 中被引入用于媒体类型，但媒体查询也可以工作，因为它们是媒体类型的直接扩展。
请记住，@import规则只能存在于样式表的开头。
如果您关心加载性能，您可能希望<link>在页面标题中使用单独的元素来引用此样式表，而不是@import，如 Asad 所示。但是，无论哪种方式都可以正常工作。
于 2013-01-02T15:29:09.673 回答
4
如果需要，我建议您并行下载 CSS 文件，而不是在 CSS 文件中导入：
<link media="only screen and (max-width: 480px)"
href="/css/styles-480.css" type="text/css" rel="stylesheet" />
使用的问题@import是第二个文件只有在包含的 CSS 文件@import完全下载和解析后才会下载。无论您是覆盖所有规则还是部分规则，这种方法都更快，因为它不会按顺序加载文件。
于 2013-01-02T15:33:06.000 回答