使用 CSS 的 mm 单位定义打印尺寸时，常因浏览器默认样式、缩放设置或未限定媒体类型导致实际打印结果偏差（如 40mm 显示为 41–42mm）；本文详解通过 @media print 精确控制打印尺寸的关键实践与注意事项。
使用 css 的 `mm` 单位定义打印尺寸时，常因浏览器默认样式、缩放设置或未限定媒体类型导致实际打印结果偏差（如 40mm 显示为 41–42mm）；本文详解通过 `@media print` 精确控制打印尺寸的关键实践与注意事项。
在 Web 打印场景中，确保元素以物理单位（如毫米）精确输出到纸张，是票据、标签、证件照排版等专业应用的核心需求。虽然 CSS 支持 mm 单位（1mm = 1/25.4in ≈ 1/96in × 25.4 ≈ 3.78px @ 96dpi），但直接在全局样式中设置 img { width: 40mm; height: 50mm; } 往往失效——原因包括：
- 浏览器默认 @media screen 样式优先级干扰；
- 打印预览/驱动自动启用「适应页面」或「缩放：自动」，覆盖绝对单位；
- 图片固有宽高比、max-width/object-fit 等继承样式干扰；
- 未重置边框、内边距、外边距导致整体尺寸溢出。
✅ 正确做法：严格限定打印上下文，并清除干扰因素
@media print {
/* 关键：仅在打印时生效，避免屏幕样式干扰 */
img.print-size-40x50 {
width: 40mm !important;
height: 50mm !important;
/* 强制覆盖所有可能的尺寸限制 */
max-width: none !important;
max-height: none !important;
object-fit: fill !important; /* 防止比例缩放失真 */
margin: 0 !important;
padding: 0 !important;
border: none !important;
}
/* 可选：重置 body 和容器，消除页边距影响 */
body, .print-container {
margin: 0 !important;
padding: 0 !important;
size: A4; /* 指定纸张尺寸（CSS Paged Media Module） */
}
}对应 HTML 示例：
<img src="photo.jpg" alt="40×50mm output" class="print-size-40x50"> <!-- 或包裹在专用容器中 --> <div class="print-container"> <img src="photo.jpg" class="print-size-40x50" alt="如何在打印输出中精确实现 CSS 指定的毫米尺寸（如 40mm × 50mm）" > </div>
⚠️ 关键注意事项：
立即学习“前端免费学习笔记（深入）”；
- 必须禁用浏览器打印缩放：用户需在打印对话框中手动将「缩放」设为 100%（而非“适合页面”或“自动”），否则 CSS 绝对单位将被强制重映射；
-
推荐使用 @page 设置纸张（现代浏览器支持）：
@page { size: A4; /* 或自定义 size: 210mm 297mm; */ margin: 0; /* 避免系统默认页边距吞没内容 */ } - 验证 DPI 一致性：CSS mm 基于标准 96dpi（即 1in = 96px → 1mm ≈ 3.78px）。若需更高精度（如工业级标签打印），建议结合 PDF 导出方案（如 Puppeteer + printOptions）；
- 测试建议：打印前务必使用「打印预览」测量工具（Chrome DevTools > Rendering > Emulate CSS media → print），并用真实尺子校验输出——不同打印机/驱动存在微小硬件误差（通常 ±0.2mm 内属正常）。
总结：精确毫米打印 ≠ 仅写 40mm，而是一套媒体查询隔离 + 样式净化 + 用户设置协同 + 物理校验的完整工作流。@media print 是起点，而非终点；唯有控制全链路，才能让 40mm 真正等于纸上 40 毫米。
