Question

我想为网页创建一个打印版面。它已经设计好像是一页，但由于HTML和CSS不是用于打印，我遇到了将“数字”页面拟合到“真正可打印”页面的问题。我知道有一些@media print and (min-resolution: 72dpi)选项，但我无法预测每个打印机的分辨率。

所以我的问题： 是否有更好的方法可以将网页或网页的一部分放到一个真正可打印的页面 ？

编辑：澄清我的担忧。我希望网页的内容始终适合一个页面。我知道如何为html设置打印样式;）我知道html / css不是为此而开发的。但我认为有一些解决方案。

我想到的一种方法是生成一个包含所有内容的PDF，然后将PDF页面大小“缩小”到DIN A4或我想要的任何内容。但这感觉有点糟糕。

Answer 1

我建议为您的布局指向一个单独的样式表，通过在样式表声明中添加值为“print”的media属性，如下所示：

<link rel="stylesheet" media="screen" href="<?php echo $Root; ?>styles/layout-screen.php" />
<link rel="stylesheet" media="print" href="<?php echo $Root; ?>styles/layout-print.php" />

然后，在样式表中，您将为html元素及其每个页面大小的子项的宽度为“100％”，如下所示。

#html, #body, #wrapper { width:100%; }

当然，假设您使用浮动div来包含内容，高度将取决于您拥有的内容量。您可能应该获得我所感知的经验水平。请注意，无论用户的打印机dpi分辨率如何，这都将使页面宽度适合打印页面。

Answer 2

您可以使用媒体查询来编写仅限打印的窗格覆盖默认样式：

@media print {
    /* Your stylesheet for printers here */
}

或者您可以使用单独的样式表：

 <link rel="stylesheet" href="print.css" type="text/css" media="print" />

您无需预测任何分辨率，但请记住打印机可以覆盖您的样式。因此，如果您需要严格的布局（如发票或任何官方文档），请考虑提供PDF。

我建议this article关于设置打印样式。

最佳实践适合一个页面的Web布局

2 个答案: