用 CSS 生成 A4 打印模板

直接回答：样式里可以用 mm 作为单位，@page { size: A4 } 定义纸张，再配合 print 媒体查询把页眉页脚、分页控制好，浏览器打印出来的就是标准 A4。

是的，CSS 中的 width 可以设置为 mm 单位，而 @page 规则中的 size 属性也可以设置为 A4 的值。以下是详细说明和注意事项：

1. `width` 可以使用 `mm` 单位

在 CSS 中，width 属性支持多种单位，包括 mm（毫米）。你可以直接使用 mm 来设置元素的宽度。

示例：

.a4-container {
    width: 210mm; /* A4 宽度 */
    height: 297mm; /* A4 高度 */
}

注意事项：

mm 单位是绝对单位，1mm 等于 1/25.4 英寸。
在屏幕上，mm 的实际显示效果可能会因设备的分辨率和缩放比例而有所不同。
在打印时，mm 单位会严格按照实际尺寸渲染。

2. `@page` 规则中的 `size` 属性

@page 规则用于定义打印页面的样式，其中的 size 属性可以设置为 A4 值，以指定页面尺寸为 A4。

示例：

@page {
    size: A4; /* 设置页面尺寸为 A4 */
    margin: 0; /* 去除默认页边距 */
}

支持的 `size` 值：

预定义值：如 A4、A3、letter 等。
自定义尺寸：可以使用 width height 的形式，例如 210mm 297mm。

示例（自定义尺寸）：

@page {
    size: 210mm 297mm; /* 自定义尺寸，等同于 A4 */
    margin: 0;
}

3. 完整示例

以下是一个完整的示例，展示如何使用 mm 单位和 @page 规则来实现 A4 纸的打印效果：

HTML

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>A4 打印示例</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="a4-container">
        <h1>这是 A4 纸的内容</h1>
        <p>这是一个用于打印的示例内容。</p>
        <p>请确保内容在 A4 纸的范围内。</p>
    </div>
    <div class="no-print">
        <p>这是不需要打印的内容。</p>
    </div>
</body>
</html>

CSS (styles.css)

/* 屏幕样式 */
.a4-container {
    width: 210mm; /* A4 宽度 */
    height: 297mm; /* A4 高度 */
    margin: 20px auto; /* 居中显示 */
    padding: 10mm; /* 内边距 */
    background-color: white;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 添加阴影 */
}

/* 打印样式 */
@media print {
    body {
        margin: 0;
        padding: 0;
    }
    .a4-container {
        width: 210mm;
        height: 297mm;
        margin: 0;
        padding: 10mm;
        box-shadow: none; /* 去除阴影 */
        page-break-after: always; /* 分页 */
    }
    .no-print {
        display: none; /* 隐藏不需要打印的内容 */
    }
}

/* 设置页面尺寸为 A4 */
@page {
    size: A4; /* 使用预定义值 */
    margin: 0; /* 去除默认页边距 */
}

4. 注意事项

浏览器兼容性：
- 大多数现代浏览器（如 Chrome、Firefox、Edge）都支持 mm 单位和 @page 规则。
- 在某些旧版浏览器中，@page 规则可能不被完全支持。
打印预览：
- 在开发过程中，使用浏览器的打印预览功能（Ctrl + P 或 Cmd + P）来测试效果。
- 确保内容在 A4 纸的范围内，且分页正确。
单位选择：
- 在打印样式中，建议使用 mm 或 pt 作为单位，而不是 px。
- px 是相对单位，其实际尺寸可能因设备分辨率而异。

5. 测试方法

在浏览器中打开页面。
按下 Ctrl + P（Windows）或 Cmd + P（Mac）打开打印预览。
检查页面尺寸是否为 A4，并确保内容布局正确。

6. 总结

width 可以设置为 mm 单位，适合用于打印布局。
@page 规则中的 size 属性可以设置为 A4 或自定义尺寸（如 210mm 297mm）。
通过结合 @media print 和 @page 规则，可以实现精确的打印布局。

如果还有其他问题，请随时告诉我！

这篇笔记整理自我自己的实践记录，如果做法有出入，或者你踩过别的坑，欢迎到留言板一起聊聊。