是否可以使HTML页面的行为类似于MS Word中的A4大小的页面?
本质上,我希望能够在浏览器中显示HTML页面,并在A4尺寸页面的尺寸中概述内容。
为了简单起见,我假设HTML页面仅包含文本(没有图像等),并且没有<br>标签。
<br>
同样,当打印HTML页面时,它将以A4尺寸的纸页形式出现。
早在2005年11月,AlistApart.com就发表了一篇文章,介绍了他们如何只使用HTML和CSS来出版一本书。
这是该文章的摘录:
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描述了命名页面的概念,但是仅当页眉和页脚可用时,它们的价值才变得显而易见。
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的某些部分。在创建用于网络显示的CSS时,请记住浏览器可以具有任意大小(例如:“移动”到“大屏幕电视”)。含义:对于Web CSS,最好使用可变宽度(%)来设置页面宽度和图像宽度,以支持尽可能多的显示设备和Web浏览客户端。
编辑(30-10-2018)
它引起了我的注意,因为size它不是有效的CSS3,这确实是正确的- 我只重复了文章中引用的代码(如前所述),它是旧的CSS2(当您查看本文的年份和此答案首次发布)。无论如何,以下是有效的CSS3代码,以方便您进行复制和粘贴:
size
@media print { body{ width: 21cm; height: 29.7cm; margin: 30mm 45mm 30mm 45mm; /* change the margins as you want them to be. */ } }
如果您认为确实需要像素( 实际上应该避免使用pixel ),则必须选择正确的DPI进行打印:
Yet, I would avoid the hassle and simply use cm (centimeters) or mm (millimeters) for sizing as that avoids rendering glitches that can arise depending on which client you use.
cm
mm