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

  • Z时代
  • 2024-01-10
  • 分类：问答

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

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

为了简单起见，我假设HTML页面仅包含文本（没有图像等），并且没有<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描述了命名页面的概念，但是仅当页眉和页脚可用时，它们的价值才变得显而易见。

无论如何…

由于要打印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浏览客户端。

它引起了我的注意，因为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像素

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.

以上是 如何在A4纸张尺寸页面中制作HTML页面？ 的全部内容， 来源链接： utcz.com/qa/434334.html

回到顶部