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