在2005年11月,AlistApart.com发表了一篇关于他们如何使用HTML和CSS发表一本书的文章。请参阅:http://alistapart.com/article/boom
这是该文章的摘录:CSS2有一个分页媒体的概念(想想纸张),而不是连续媒体(想想滚动条)。样式表可以设置页面大小及其边距。页面模板可以给出名称,元素可以说明要打印的页面。此外,源文档中的元素可以强制分页。这是我们使用的样式表的片段:@page {
size: 7in 9.25in;
margin: 27mm 16mm 27mm 16mm;}
有了一个美国的出版商,我们得到了以英寸为单位的页面大小。作为欧洲人,我们继续进行公制测量。CSS接受两者。
设置页面大小和页边距后,我们需要确保在正确的位置有分页符。以下摘录显示了如何在章节和附录之后生成分页符:div.chapter, div.appendix {
page-break-after: always;}
另外,我们使用CSS2来声明命名页面:div.titlepage {
page: blank;}
也就是说,标题页将打印在名称为“空白”的页面上.CSS2描述了命名页面的概念,但只有当页眉和页脚可用时,它们的值才会变得明显。
无论如何…
由于您要打印A4,当然需要不同的尺寸:@page {
size: 21cm 29.7cm;
margin: 30mm 45mm 30mm 45mm;
/* change the margins as you want them to be. */}
本文深入研究设置分页符等内容,因此您可能希望完全阅读。
在您的情况下,诀窍是首先创建打印CSS。大多数现代浏览器(> 2005)支持缩放,并且已经能够基于打印CSS显示网站。
现在,您将希望使Web显示看起来有点不同,并使整个设计适应大多数浏览器(包括2005年之前的旧版本)。为此,您必须创建一个Web CSS文件或覆盖打印CSS的某些部分。在为Web显示创建CSS时,请记住浏览器可以具有任何大小(想想:“移动”到“大屏幕电视”)。含义:对于Web CSS,您的页面宽度和图像宽度最好使用可变宽度(%)设置,以支持尽可能多的显示设备和Web浏览客户端。
编辑(26-02-2015)
今天,我偶然发现了SmashingMagazine上的另一篇近期文章,该文章也潜入了使用HTML和CSS进行打印设计......以防万一你可以使用另一个教程。
编辑(30-10-2018)
它引起了我的注意,因为size它不是有效的CSS3,这确实是正确的 - 我只是重复了文章中引用的代码(如上所述)是很好的旧CSS2(当你查看文章年份时这是有道理的这个答案首次发表)。无论如何,这是您的复制和粘贴方便的有效CSS3代码:@media print {
body{
width: 21cm;
height: 29.7cm;
margin: 30mm 45mm 30mm 45mm;
/* change the margins as you want them to be. */
} }
如果您认为您确实需要像素(实际上应该避免使用像素),则必须注意选择正确的DPI进行打印:72 dpi(网页)= 595 X 842像素
300 dpi(打印)= 2480 X 3508像素
600 dpi(高质量打印)= 4960 X 7016像素
然而,我会避免麻烦,只需使用cm(厘米)或mm(毫米)进行大小调整,因为这可以避免根据您使用的客户端出现可能出现的故障。