很久以前，2005 年 11 月，AlistApart.com 发表了一篇文章，介绍他们如何仅使用 HTML 和 CSS 出版一本书。看：http://alistapart.com/article/boom 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 描述了命名页面的概念，但只有当页眉和页脚可用时，它们的价值才变得明显。
Anyway…
既然你想打印 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)
今天，我偶然发现了另一个更新的文章发表于 SmashingMagazine http://www.smashingmagazine.com/2015/01/07/designing-for-print-with-css/它还深入探讨了使用 HTML 和 CSS 进行打印设计……以防万一您可以使用另一个教程。
编辑（2018年10月30日）
这引起了我的注意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 像素
然而，我会避免麻烦并简单地使用cm（厘米）或mm（毫米）用于调整大小，以避免根据您使用的客户端可能出现的渲染故障。
