@media print 可直接捕获打印上下文，无需js或设备判断；规则须写入css文件或块，避免内联遗漏media属性；firefox预览最准，chrome可能误合页边距；page-break-inside: avoid应加在而非上；背景、边框、图片需!important强制打印；@page仅控纸张尺寸与页边距，不可嵌套选择器。
直接用 @media print 就能捕获打印上下文，不用判断设备或写 JS
浏览器只要进入打印预览（Ctrl+P / Cmd+P）或执行 window.print()，就会自动启用 @media print 规则——它和 @media screen 是平级的媒体类型，不是子集，也不依赖 UA 或 JS 检测。
常见错误是把 @media print 写在内联 <style></style> 里却漏了 media="print" 属性，或者误以为 DevTools 的“模拟媒体类型”能准确反映分页效果。实际上，那个开关只改 viewport，不触发真实分页引擎。
- 必须把规则写进 CSS 文件或
<style></style>块里，且无需额外属性 - 不要靠刷新页面看效果，每次修改后都要点“打印预览”再验证
- Firefox 的预览最接近真实输出；Chrome 有时会错误合并页边距，导致内容偏移
page-break-inside: avoid 对表格最有效，但别加在 <tr> 上
<p>表格打印时被截断是最典型问题，根源是浏览器按纸张高度硬折行，而 <code><tr> 不支持 <code>page-break-inside —— 这个属性在多数浏览器中对表格行完全无效。
正确做法是把 page-break-inside: avoid 加到整个 <table> 元素上，同时配合 <code>page-break-after: auto 防止强制断页产生空白页。
- 对动态高度表格，优先用
page-break-inside: avoid+display: block（避免display: table干扰） - 若表格实在太大，改用
page-break-before: always插入一个空<div class="page-break"></div>强制另起一页 - 避免给
<thead> 单独设 <code>display: table-header-group：部分浏览器不识别该值在打印上下文中的语义背景色、边框、图片默认不打印，得用
!important强制浏览器出于省墨考虑，默认忽略
background-color、border和部分<img>渲染——这不是 bug，是规范行为。你写的样式若没生效，大概率是被默认策略屏蔽了。必须显式覆盖，且推荐加
!important，因为用户浏览器可能启用了“仅打印文本”选项，会进一步降级样式优先级。- 打印背景：写
background-color: #fff !important或background: #fff !important - 打印边框：用
border: 1px solid #000 !important，别依赖继承 - 图片保真：对关键图加
max-width: 100%; height: auto;防溢出纸张；还需-webkit-print-color-adjust: exact和color-adjust: exact
@page控制纸张尺寸与页边距，但不能在里面写选择器@page规则专用于定义物理纸张行为，比如设 A4 尺寸、页眉页脚、页边距。但它**不能嵌套选择器**，也不能写h1 { color: red; }这类样式——那些得回@media print里写。容易踩的坑是混淆
@page和@media print的职责边界：前者管“纸”，后者管“内容”。例如，@page { size: A4; margin: 1cm; }可以，但@page { .header { display: none; } }会直接被忽略。- 设置页边距必须用绝对单位（
cm、mm、in），rem或%在这里无效 - 想让某元素总出现在每页顶部？用
@page :first { ... }或结合position: running()（但兼容性差，慎用） - Chrome 和 Firefox 对
break-before: page支持更好，可搭配@supports (break-before: page)做渐进增强
- 打印背景：写
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
