html - 网页布局到一页的最佳实践

Question

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

所以我的问题是:是否有更好的方法使网页或网页的一部分适合一个真正的可打印页面？

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

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

Answer 1

我会通过在样式表声明中添加值为“print”的媒体属性来为针对打印机的布局推荐一个单独的样式表，如下所示:

<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%; }

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