应直接使用@media print编写打印样式，集中置于文件末尾，禁用display: none误用，重置字体颜色尺寸，用pt/cm单位，配合page-break与break-before双写保障分页。
直接用 @media print，别套 Less 变量或嵌套逻辑
Less 本身不改变 CSS 媒体查询的语义，@media print 就是标准写法，硬加变量抽象（比如 @print-query: ~"print"）反而让调试变难。浏览器打印预览只认最终生成的 CSS，中间多一层抽象没收益，还容易漏编译或作用域错乱。
实操建议：
- 把所有打印样式集中放在文件末尾，用
@media print { ... }包裹，避免被其他规则意外覆盖 - 不要在
@media print内部用&嵌套选择器——它会生成冗余层级，比如.header & .logo可能变成@media print {.header .header .logo} - 慎用
.clearfix类或伪元素清除浮动：打印引擎对::after支持不稳定，部分打印机驱动会忽略，改用overflow: hidden或显式height
打印样式里禁用 display: none 的常见误用
很多人习惯给非关键元素加 display: none，但打印时某些内容（比如二维码、页脚版权、分页提示）需要保留可见性，而 display: none 会彻底移除渲染流，连分页位置都不可控。
更稳妥的做法：
- 用
visibility: hidden隐藏但保留占位，避免内容挤到上一页 - 对图片/广告等纯装饰性元素，才用
display: none - 需要“仅打印显示”的内容（如
Printed on 2024-06-12），加.print-only { display: none; } @media print { .print-only { display: block; } }
字体、颜色、尺寸必须重置，别依赖默认值
不同浏览器和打印机驱动对系统字体、字号缩放、颜色转灰度的处理差异极大。Chrome 打印预览默认禁用背景色，Firefox 可能强制将 color 转为黑灰，Safari 对 rem 单位支持不一致。
关键控制点：
- 强制设置
color: #000 !important;和background: #fff !important;，避免文字发灰或背景留白异常 - 用
pt或cm替代px/rem控制字号与边距（例如font-size: 12pt;），更贴近物理纸张尺寸 - 禁用所有 Web 字体（
@font-face在打印中基本无效），回退到serif/sans-serif
分页控制用 page-break 系列属性，但注意兼容性断层
break-before / break-after 是现代标准，但 IE 和旧版 Edge 只认 page-break-before。Less 编译不会帮你补全前缀，得手动写两套。
推荐写法：
- 对标题、报表节区等强分页需求，同时写：
@media print { h2 { page-break-before: always; break-before: page; } } - 避免在
inline元素（如span、a）上设分页属性——无效，必须作用于块级容器 -
orphans/widows在打印中支持度极低，别依赖；真正可控的是page-break-inside: avoid（配合display: block）
最常被忽略的是分页后的内容截断：哪怕写了 page-break-inside: avoid，如果容器高度超页，依然会被切开。得靠预估内容高度 + 设置最小高度兜底，没有银弹。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
