如何使用@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">元素或类似元素来包含打印样式表。