有没有办法将相同的CSS样式表用于打印介质和默认布局？

Question

我正在寻找一种方法来使用与默认屏幕布局相同的打印介质样式表.我的优点是每次更新CSS时都不需要更新2个文件.我希望有一个样式表,并通过某种方式表示它们来指定打印介质的特殊规则......这可能是不可能的,但我想我会把问题放在那里.

Answer 1

如果您希望所有媒体中的样式相同,只需将样式表中的常用样式定义为正常(即不在任何媒体规则中),然后将媒体特定元素放在相关规则中.

如果您希望某些样式应用于媒体子集,您可以这样做:

@media print {
  body { font-size: 10pt }
}
@media screen {
  body { font-size: 13px }
}
@media screen, print {
  body { line-height: 1.2 }
}

这是相关W3C页面的链接

Answer 2

有这样的语法，尽管我真的不知道所有浏览器是否都支持它（应该是）：

@media print {
    body {
        background: #fff;
        color: #000;
    }
    /* etc */
}

请参阅W3 上 CSS2 标准的媒体部分。