如何在A4纸张尺寸页面中制作HTML页面？

早在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描述了命名页面的概念，但是仅当页眉和页脚可用时，它们的价值才变得显而易见。

无论如何…

由于要打印A4，因此当然需要不同的尺寸：

@page {    size: 21cm 29.7cm;    margin: 30mm 45mm 30mm 45mm;     }

本文深入探讨了设置分页符等内容，因此您可能需要完整阅读。

就您而言，诀窍是首先创建打印CSS。大多数现代浏览器（> 2005）都支持缩放，并且已经能够基于打印CSS显示网站。

现在，您将要使Web外观看起来有些不同，并使整个设计也适应大多数浏览器（包括2005年之前的旧浏览器）。为此，您必须创建一个Web
CSS文件或覆盖打印CSS的某些部分。在创建用于网络显示的CSS时，请记住浏览器可以具有任意大小（例如：“移动”到“大屏幕电视”）。含义：对于Web
CSS，最好使用可变宽度（％）来设置页面宽度和图像宽度，以支持尽可能多的显示设备和Web浏览客户端。

编辑（30-10-2018）

它引起了我的注意，因为

size

@media print {    body{        width: 21cm;        height: 29.7cm;        margin: 30mm 45mm 30mm 45mm;            } }

如果您认为确实需要像素（ 实际上应该避免使用pixel ），则必须选择正确的DPI进行打印：

• 72 dpi（网络）= 595 X 842像素
• 300 dpi（打印）= 2480 X 3508像素
• 600 dpi（高质量打印）= 4960 X 7016像素

Yet, I would avoid the hassle and simply use

cm

mm