@media print是唯一可靠入口，所有打印优化必须包裹其中；需用pt/mm单位、系统字体、显式重置table/分页样式，并避免屏幕样式覆盖。
@media print 是唯一可靠入口，不加它就等于没做打印适配。 浏览器默认按屏幕逻辑渲染，直接 window.print() 会把导航栏、背景图、浮动布局全塞进纸张里——不是内容被截断，就是字体发虚、表格劈成两半。所有优化都必须从这个媒体查询开始，且不能靠类名切换或 JS 动态注入来替代。
为什么 @media print 必须独立写、优先级要压过屏幕样式
常见错误是把打印规则混在主 CSS 末尾，结果被 .container { width: 1200px; } 这类通用规则覆盖；更糟的是用多个 <link> 分散加载，部分规则根本没进渲染树。
- 所有打印专用样式必须包裹在
@media print { }内，不能只靠.print-only类控制显隐 - 推荐用外部文件 +
<link rel="stylesheet" media="print" href="print.css">，比内联@media print更早介入渲染流程 - 避免写
* { margin: 0; }这类宽泛重置，容易误杀<table> 或 <code><pre class="brush:php;toolbar:false;"></pre>的关键结构 - 如果页面含
<iframe></iframe>，父页的@media print不会穿透生效，需提前提取内容或单独重置其样式 - 正文字体栈强制用系统安全字体：
font-family: "Microsoft YaHei", SimSun, sans-serif; - 字号统一用
pt（如12pt）或mm（如4.2mm），禁用em、rem、% - 禁用
@font-face在打印时加载，哪怕已声明font-display: block，也建议在@media print中直接降级 -
<pre class="brush:php;toolbar:false;"></pre>和<code>块必须指定等宽字体：font-family: "Courier New", monospace; - 加
color-adjust: exact; -webkit-print-color-adjust: exact;强制打印背景色和图片（但注意兼容性） - 显式声明
thead { display: table-header-group; }和tfoot { display: table-footer-group; }，别依赖浏览器自动处理 - 表格宽度设为
width: 100% !important;，禁用max-width或固定像素值 - 边框用
border-collapse: collapse;，避免双线叠加导致打印错位 - 对长表格，可加
.new-page-after-table { page-break-after: always; }强制分页
字体、单位、颜色怎么设才不糊、不缩放失真
中文打印最常崩在字体上：用了 @font-face 的 Web Font，预览时变方块；字号用 rem 或 %，不同浏览器换算出的物理尺寸差一大截。
表格和分页怎么避免被硬生生劈开
表格跨页断裂是最影响专业感的问题——<thead> 只在第一页显示，第二页开头只剩孤零零的 <code><tr>，而且浏览器默认不会重复表头。<ul><li>给 <code><tr> 加 <code>page-break-inside: avoid; 防止单行被切开
真正难的不是写几条 CSS，而是意识到打印是独立渲染上下文——它不响应鼠标、不支持滚动、没有视口概念。所有“看起来差不多”的样式，在纸张上都会暴露计算误差。比如 @page { margin: 1cm; } 在 Chrome 和 Safari 下实际留白可能差 2mm，这种细节只能靠真实打印机+多轮 PDF 导出交叉验证。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
