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

Posted 2023-03-06

【中文标题】如何使用@media 打印查询导入打印样式表？

【英文标题】：How to import printing stylesheet using @media print query?

【发布时间】：2013-12-16 07:24:39

【问题描述】：

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

h1 
....


....

@media screen 
....


@media print 
 @import "print.css";

我该怎么做？

【问题讨论】：

***.com/a/224278/2151120的可能重复

【参考方案1】：

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

@import "print.css" print;

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

【讨论】：

嗯，但是如果我把它放在顶部，规则会以错误的方式级联。

哦，是的，为什么我没有想到使用单独的链接元素。谢谢！