试图了解如何有效地使用print.css,以便在打印预览/打印中不显示图形和导航元素.阅读一些文章,以及
html5样板的print css的一部分.两个网站,它们在打印过程中改变外观的方式令人印象深刻
http://bottlerocketcreative.com/
但我看不到与打印相关的CSS.你能否指出他们用来学习如何进行类似转换的CSS.
解决方法
我查看了您链接到的网站,但它们似乎没有与之关联的任何打印样式.我相信他们正在使用浏览器默认打印设置.因此,一个重大变化是背景图像被默认隐藏.对于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">
