最稳妥方式是在主CSS中直接追加@media print规则，兼容性好、维护成本低，支持复用类名和CSS变量，且能同步DOM结构变化；独立print.css需注意加载时机和浏览器兼容性问题。
用 @media print 写在主 CSS 里最稳妥
直接在现有样式表中追加 @media print 规则，是兼容性最好、维护成本最低的方式。浏览器对内联媒体查询的支持非常成熟，连 IE9 都能正确识别。
- 不用额外请求文件，避免打印时因网络延迟或跨域导致样式丢失
- 可以复用已有类名和变量（比如
--primary-color），无需重复定义 - 修改响应式逻辑时，打印样式能同步感知 DOM 结构变化（例如折叠的侧边栏在打印时是否应展开）
@media print {
body {
font-size: 12pt;
color: #000;
}
.header, .nav, .ads {
display: none !important;
}
.content {
page-break-inside: avoid;
}
}
用
这种方式看似清晰，但容易踩两个坑：一是文件未加载完成就触发打印，二是部分浏览器（尤其是 Safari 和旧版 Edge）会忽略未完全解析的 print 样式表。
- 务必把
放在顶部，不要 defer 或动态插入 - 避免在
print.css中依赖@import，它会阻塞渲染且在打印预览中不可靠 - 如果主站用了 CSS-in-JS（如 Emotion、Styled Components），单独 link 的 CSS 无法继承运行时注入的全局规则
window.matchMedia("print") 不能用来动态切换样式
这个 API 只反映当前是否处于打印预览模式（比如 Chrome 的 Ctrl+P 窗口打开时返回 matches: true），但它不触发重绘，也不适合做样式开关。
- 监听
matchMedia("print").addEventListener("change", ...)在大多数浏览器中不会被触发 —— 打印预览不是“媒体查询变更”，而是独立渲染通道 - 不要试图用 JS 动态增删 class 来模拟 print 效果，这会导致打印输出与预览不一致（例如分页错乱）
- 真正需要 JS 干预的场景极少，比如导出 PDF 前临时隐藏水印，此时应配合
window.print()前后手动操作 DOM
常见失效原因：CSS 优先级和 !important 的误用
打印样式被主样式覆盖，往往不是因为没生效，而是选择器权重不够或属性本身不支持打印上下文。
立即学习“前端免费学习笔记（深入）”；
-
color、background-color、font-size有效；但box-shadow、transform、filter在绝大多数浏览器打印中被忽略 - 用
display: none隐藏元素比visibility: hidden更可靠 —— 后者仍占位，可能影响分页 - 如果用了 CSS 框架（如 Bootstrap），它的
.d-none类默认不带@media print，需自行覆盖或改用.d-print-none（Bootstrap 5+ 提供）
page-break-before、break-inside 这些属性在不同浏览器中表现差异大，建议只在关键容器上谨慎使用，别指望它像 Flex/Grid 那样精确布局。 
