如何制作一个A4纸大小的HTML页面?

是否有可能使一个HTML页面的行为，例如，像一个a4大小的页面在MS Word?

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

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

另外，当HTML页面被打印出来时，它将显示为a4大小的纸质页面。

当前回答

强制web浏览器以与A4相同的像素尺寸显示页面是相当容易的。然而，在渲染时可能会有一些怪癖。

假设你的显示器显示72 dpi，你可以添加如下内容:

<!DOCTYPE html>
<html>
  <head>
    <style>
    body {
        height: 842px;
        width: 595px;
        /* to centre page on screen*/
        margin-left: auto;
        margin-right: auto;
    }
    </style>
  </head>
  <body>
  </body>
</html>

2010-07-27 07:44:48

其他回答

我使用HTML生成报告，在真实的纸张上正确地打印出真实大小。

如果你小心地使用mm作为CSS文件中的单位，你应该是OK的，至少对于单页。不过，人们可以通过改变浏览器中的打印缩放来搞砸你。

我似乎记得我所做的每一件事都是单页的，所以我不必担心分页——那可能要困难得多。

2010-07-27 07:49:31

A4尺寸为210x297mm

所以你可以用CSS设置HTML页面来适应这些大小:

html,body{
    height:297mm;
    width:210mm;
}

2014-03-01 12:49:09

强制web浏览器以与A4相同的像素尺寸显示页面是相当容易的。然而，在渲染时可能会有一些怪癖。

假设你的显示器显示72 dpi，你可以添加如下内容:

<!DOCTYPE html>
<html>
  <head>
    <style>
    body {
        height: 842px;
        width: 595px;
        /* to centre page on screen*/
        margin-left: auto;
        margin-right: auto;
    }
    </style>
  </head>
  <body>
  </body>
</html>

2010-07-27 07:44:48

我在谷歌上搜索“A4 CSS页面模板”(codepend .io)后看到了这个解决方案。它使用<page>标记在浏览器中显示A4 (A3,A5，也是纵向)大小的区域。在这个标记中显示内容，但绝对位置仍然相对于浏览器区域。

身体{ 背景:rgb (204204204); ｝页面{ 背景:白色; 显示:块; 保证金:0自动; margin-bottom: 0.5厘米; 箱影:0 0 0.5cm rgba(0,0,0,0.5); ｝页面(=“A4大小){ 宽度:21厘米; 高度:29.7厘米; ｝布局页面(大小= " A4 "][=“肖像”]{ 宽度:29.7厘米; 高度:21厘米; ｝ @media print { 正文，页{ 保证金:0; 不必:0; ｝｝ <页面大小= >“A4 A4页面< / > <page size="A4" layout="portrait">A4 portrait</page>

这适用于我没有任何其他css/js库包括在内。适用于当前的浏览器(IE, FF, Chrome)。

2017-03-26 09:04:26

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

以下是那篇文章的节选:

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的网站。

Now, you'll want to make the web display look a bit different and adapt the whole design to fit most browsers too (including the old, pre 2005 ones). For that, you'll have to create a web CSS file or override some parts of your print CSS. When creating CSS for web display, remember that a browser can have ANY size (think: “mobile” up to “big-screen TVs”). Meaning: for the web CSS your page-width and image-width is best set using a variable width (%) to support as many display devices and web-browsing clients as possible.

编辑(26-02-2015)

今天，我碰巧在SmashingMagazine上看到了另一篇最近的文章，这篇文章也探讨了如何使用HTML和CSS进行打印设计……

编辑(30-10-2018)

这引起了我的注意，因为它的大小不是有效的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(毫米)来确定大小，因为这样可以避免根据您使用的客户机而产生的渲染故障。

2014-02-15 08:24:57

如何制作一个A4纸大小的HTML页面?

推荐文章

最新文章

标签