css - CSS 打印样式表 - 示例

Question

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

http://css-tricks.com/

http://bottlerocketcreative.com/

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

Answer 1

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

但是一般来说，打印样式要么使用现有样式表中的媒体标签进行设置：

@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">