绝对长度单位（in/cm/mm/pt）在打印中更可靠，因其严格映射物理尺寸，不受缩放、dpr或zoom影响；而%、em、rem等相对单位基准不稳定，易致错位、截断或换页异常。
打印样式中用 %、em 或 rem 做尺寸控制，几乎必然导致内容错位、截断或换页异常——因为这些相对单位在打印上下文中基准不稳定，浏览器会按自身 UA 策略重算，不是你写的多少就是多少。
为什么绝对长度单位（in/cm/mm/pt）在打印中更可靠
打印输出是物理介质行为，依赖 DPI 和纸张真实尺寸。CSS 规范明确要求 in、cm、mm、pt 在打印媒体中必须映射到物理长度（1in = 96px @ 96dpi），不随屏幕缩放、DPR 或用户 zoom 变化。而 px 在打印中虽也按 96dpi 解析，但容易被误读为“设备像素”，不如物理单位语义清晰、兼容性稳。
-
1in始终对应 2.54cm 物理长度，Chrome/Firefox/Edge 打印预览均严格遵守 -
pt（1/72 inch）是印刷业通用单位，对字体大小和细线控制更精准 - 避免用
px表达边距或容器尺寸——它在高 DPR 屏幕上可能被错误映射，尤其当页面已启用缩放时
@page + 绝对单位必须配对使用
只写 @page { margin: 0.5in; } 不够，你还得确保内容区尺寸与之匹配。否则 width: 100% 仍会基于一个被 UA 暗中调整过的“内容宽度”计算，造成横向溢出。
- 显式声明纸张尺寸：
@page { size: A4; margin: 0.4in; } - body 或主容器设为固定物理宽度：
body { width: 8.3in; /* A4 内容宽 = 8.5in - 0.2in */ margin: 0 auto; } - 表格、卡片等块级元素优先用
max-width: 8.3in而非width: 100%，防止子元素 padding/border 累加撑破 - 禁用
vw/vh——它们在打印中无定义，会被忽略或转为 0
字体、边框、内边距全部改用 pt 或 in
字号太小、边框发虚、段落间距压缩，根本原因常是单位混用。打印引擎对 rem 的根字体计算不可控，对 em 的继承链易断裂。
- 正文字号至少
12pt（≈16px），标题可到14pt–18pt；小于10pt在 A4 纸上基本不可读 - 边框统一用
border: 0.5pt solid #000，比1px更稳定；如需视觉更细，用0.25pt（所有现代浏览器支持） - 内边距用
padding: 0.2in替代padding: 1rem，避免因font-size重置导致空白消失 - 行高建议用无单位值（如
line-height: 1.4）或pt，不用em——它会叠加父级字体缩放
常见翻车点：绝对单位 + transform 缩放共存
如果页面同时用了 transform: scale(0.9) 和 margin: 0.3in，你会发现 0.3in 依然按原始尺寸解析，但视觉上整个区域被压扁，留白比例失真。这不是 bug，是规范行为：transform 不影响盒模型尺寸计算，只改变渲染层。
- 打印样式中应完全避免
transform（包括scale、translate），它和物理单位逻辑冲突 - 需要缩放布局？改用
@page { size: A4 landscape; }切换方向，或用zoom（仅部分浏览器支持，不推荐） - 若必须动态缩放（如 JS 控制打印前缩放），应在触发打印前移除所有
transform样式，并用绝对单位重写尺寸
真正难的不是把 % 换成 in，而是意识到打印样式是一套独立于屏幕的渲染上下文——它的盒模型不继承 viewport，不响应用户缩放，也不受 CSS-in-JS 动态注入干扰。漏掉 @page 或混用单位，哪怕只有一处，都可能导致整页内容偏移半英寸。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
