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

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

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

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

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

最佳答案

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

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

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

div.titlepage {
    page: blank;
}

反正…
由于您要打印 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)
今天，我偶然发现了另一个更新的 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 (web) = 595 X 842 像素

300 dpi(打印)= 2480 X 3508 像素

600 dpi(高质量打印)= 4960 X 7016 像素

然而，我会避免麻烦并简单地使用 cm(厘米)或 mm(毫米)来调整大小，因为这可以避免根据您使用的客户端而出现的渲染故障。

关于html - 如何在 A4 纸张大小的页面中制作 HTML 页面？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/3341485/