CSS打印样式表 - 示例

Question

尝试了解如何有效使用print.css，以便在打印预览/打印中不显示图形和导航元素。阅读一些文章，以及html5样板的print css的一部分。两个网站，它们在打印过程中改变外观的方式令人印象深刻

http://css-tricks.com/

http://bottlerocketcreative.com/

但是我看不到与打印有关的CSS。你能否指出他们用来学习如何进行类似转换的CSS。

Answer 1

我查看了您链接到的网站，但它们似乎没有与之关联的任何打印样式。我相信他们正在使用浏览器默认打印设置。因此，一个重大变化是背景图像被隐藏为默认值。对于CSS-Tricks，它看起来如此不同的原因是因为它使用媒体查询。因此，如果您将浏览器缩小到800px或更低，您将看到帖子列表扩展到浏览器的整个宽度，就像打印文档时一样。

但是，通常，打印样式可以使用现有样式表中的媒体标记进行设置：

@media print{
    /*styles here*/
}

或链接到专门用于打印目的的样式表：

<!--These styles styles are only for screens as set by the media value-->
<link rel="stylesheet" href="css/main.css" media="screen">

<!--These styles styles are only for print as set by the media value-->
<link rel="stylesheet" href="css/print.css" media="print">