如何设计 HTML 页面以 A4 尺寸打印？

如何设计具有 A4 纸张尺寸的 HTML 页面

许多用户希望能够打印模仿尺寸和边距的 HTML 页面A4 尺寸的纸张。本文探讨了实现此效果所需的技术。

用于打印的 CSS 媒体查询

控制 HTML 页面打印尺寸的关键在于利用 CSS 媒体查询。这些查询针对印刷媒体并允许应用特定样式。对于A4尺寸的打印，可以使用以下@media查询：

@media print {
    body {
        width: 21cm;
        height: 29.7cm;
        margin: 30mm 45mm 30mm 45mm;
    }
}

此代码将打印页面的宽度和高度分别设置为21厘米和29.7厘米，对应于A4页面。此外，它还定义了 30 毫米（顶部和底部）和 45 毫米（左侧和右侧）的边距，以实现所需的页面尺寸。

后续分页符

如果 HTML内容超出指定的页面大小，必须创建后续页面。这可以通过插入 CSS 分页符来完成。例如：

div.chapter {
    page-break-after: always;
}

此代码确保每个章节都从新页面开始。

浏览器显示

优化网页显示页面，同时保持打印的 A4 尺寸，创建单独的 Web CSS 文件或覆盖打印 CSS 的部分内容。例如：

@media screen {
    body {
        width: 80%;
        height: auto;
        margin: 20px;
    }
}

此代码将显示宽度设置为可用浏览器空间的 80%，并自动调整高度。边距也减少到 20 像素，以获得更适合网络的布局。

结论

通过实施 CSS 媒体查询和管理分页符，可以创建一个打印时 HTML 页面的行为类似于 A4 尺寸的文档。通过分离打印和网页CSS，页面还可以针对不同的观看环境保持优化的显示。

以上是如何设计 HTML 页面以 A4 尺寸打印？的详细内容。更多信息请关注PHP中文网其他相关文章！