css - 如何使用@media 打印查询导入打印样式表？

Question

我想将我的打印样式表移动到一个单独的文件中，以便使用@media 查询导入。我尝试了以下方法，但它似乎不起作用，至少在 Chrome 上是这样:

h1 {
....
}

....

@media screen {
....
}

@media print {
 @import "print.css";
}

我该怎么做？

Answer 1

@import本身支持媒体类型和媒体查询，因此您可以将媒体查询传递给 @import语句而不是将其嵌套在 @media 中规则:

@import "print.css" print;

此外，您不能添加 @import样式规则的语句，所以在这种情况下，您需要将它一直放在最上面。如果由于级联原因不能这样做，则不能使用 @import ;您需要使用 <link media="print"> 包含打印样式表元素或类似元素。