CSS 打印样式表 - 示例 [关闭]答案

【问题标题】：CSS Print Style Sheets - Examples [closed]CSS 打印样式表 - 示例 [关闭]
【发布时间】：2012-10-08 06:07:36
【问题描述】：

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

http://css-tricks.com/

http://bottlerocketcreative.com/

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

【问题讨论】：

感谢 Kevin，我使用 chrome 开发人员工具并搜索了打印和相关内容。会再试一次。
抱歉，我也无法找到他们的 (css-tricks) 打印 CSS。
CSS 技巧实际上并没有太大变化。去掉所有背景图片和颜色，你会发现它几乎是一样的。
好眼光。因为我不是网络开发人员，所以我对 css 有困难。很好地掌握了 Javascript，并且到目前为止使用最少的 css（bootstrap 也很有帮助:-)。您的任何建议都会有所帮助。

标签： css

【解决方案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">

【讨论】：

+1 太好了，我也看到它在缩小屏幕时非常接近打印布局。感谢您的帮助，如果没有更多相关答案，将接受。