html - 如何在 A4 纸张大小的页面中制作 HTML 页面？

Question

是否可以使 HTML 页面的行为类似于 MS Word 中的 A4 大小页面？

本质上，我希望能够在浏览器中显示 HTML 页面，并以 A4 尺寸页面的尺寸勾勒出内容。

为了简单起见，我假设 HTML 页面将只包含文本(没有图像等)并且不会有 <br>以标签为例。

另外，当 HTML 页面被打印出来时，它会以 A4 大小的纸页形式出现。

Answer 1

很久以前，在 2005 年 11 月，AlistApart.com 发表了一篇文章，介绍了他们如何仅使用 HTML 和 CSS 出版一本书。见:http://alistapart.com/article/boom

这是那篇文章的摘录:

CSS2 has a notion of paged media (think sheets of paper), as opposed to continuous media (think scrollbars). Style sheets can set the size of pages and their margins. Page templates can be given names and elements can state which named page they want to be printed on. Also, elements in the source document can force page breaks. Here is a snippet from the style sheet we used:

@page {
    size: 7in 9.25in;
    margin: 27mm 16mm 27mm 16mm;
}

Having a US-based publisher, we were given the page size in inches. We, being Europeans, continued with metric measurements. CSS accepts both.

After setting the up the page size and margin, we needed to make sure there are page breaks in the right places. The following excerpt shows how page breaks are generated after chapters and appendices:

div.chapter, div.appendix {
    page-break-after: always;
}

Also, we used CSS2 to declare named pages:

div.titlepage {
    page: blank;
}

That is, the title page is to be printed on pages with the name “blank.” CSS2 described the concept of named pages, but their value only becomes apparent when headers and footers are available.

不管怎样……

既然要打印 A4，当然需要不同的尺寸:

@page {
    size: 21cm 29.7cm;
    margin: 30mm 45mm 30mm 45mm;
     /* change the margins as you want them to be. */
}

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

在您的情况下，诀窍是首先创建打印 CSS。大多数现代浏览器 (>2005) 支持缩放，并且已经能够显示基于打印 CSS 的网站。

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

编辑(2015 年 2 月 26 日)

今天，我偶然发现了另一个更新的 article at 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(毫米)来确定大小，因为这样可以避免渲染故障，具体取决于哪个客户端你用。