打印样式必须用@media print包裹，否则浏览器忽略；需手动启用框架的打印变体，慎用display: none隐藏内容，背景色需用border模拟，测试须用打印预览而非另存PDF。
打印样式表必须用 @media print 包裹，否则浏览器直接忽略
浏览器只认标准的媒体查询语法，@media screen 或没声明的 CSS 在打印预览里全失效。很多人把打印样式写在普通 style 块里，或者用 @media all 想“一劳永逸”，结果打印出来还是带导航、侧边栏、背景图——根本没进打印上下文。
- 必须显式写
@media print { ... }，哪怕只改一行 - 不要依赖 CSS 框架默认的打印规则：Bootstrap 的
print支持仅限于基础重置（比如移除box-shadow），不处理组件级结构 - 若用 Tailwind，得手动开启
print:变体，并在tailwind.config.js的variants或plugins中确认已启用
display: none 在打印时可能意外隐藏不该藏的内容
常见做法是给 .navbar、.sidebar 加 display: none，但容易误伤：比如某些弹窗或表格行内操作按钮也用了相同 class；更隐蔽的是，用 visibility: hidden 看似安全，但它仍占布局空间，打印时可能撑出空白页。
- 优先用语义化类名，如
.no-print，避免和功能类名冲突 - 慎用全局选择器：
header, footer, aside { display: none; }会干掉所有footer，包括文章末尾的版权信息 - 对表格行/单元格做隐藏时，用
display: none会导致整行错位，改用print-color-adjust: exact配合透明色更稳
背景色和图片默认不打印，-webkit-print-color-adjust: exact 不是万能解
Chrome / Edge 默认禁用背景打印（节省墨水），即使写了 background: #000 也白搭。加 -webkit-print-color-adjust: exact 能强制渲染，但副作用明显：它会让浅灰文字在白纸上糊成一片，且 Safari 不支持该属性，Firefox 则完全无视。
- 真正可控的做法是换思路：用
color+border模拟背景块，比如用border-left: 4px solid #007bff替代左侧高亮条 - 若必须打背景图，请提前转为 SVG 内联或 Base64，并确保尺寸固定（百分比宽度在打印中不可靠）
- 测试时务必开浏览器的「打印预览」，别信「另存为 PDF」的渲染结果——二者引擎路径不同，PDF 导出有时会跳过部分 media 规则
Tailwind 和 Bootstrap 的打印类实际生效范围很窄
框架提供的打印工具类（如 Bootstrap 的 d-print-none，Tailwind 的 print:hidden）只覆盖极小一部分场景。它们不处理字体缩放、分页截断、表格跨页重复标题这些真实痛点，更不会自动适配暗色模式下的打印反色问题。
立即学习“前端免费学习笔记（深入）”；
- Bootstrap 5 的
d-print-*类只在@media print下生效，但没定义任何字体、间距或分页相关规则 - Tailwind 的
print:变体默认不生成page-break-inside: avoid或break-inside: avoid，表格行被截断得非常随意 - 最稳妥的补救：在自定义 CSS 中单独写
@media print { table { break-inside: auto; } tr { break-inside: avoid; } }
打印样式不是“加个 class 就完事”的事，它本质是另一套渲染上下文——字体单位会变（pt 优先于 rem），盒模型行为微调，分页逻辑独立。很多问题只有真纸张吐出来那一刻才暴露。
