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