使用@media print媒体查询可使CSS仅在打印时生效，推荐直接在现有CSS中编写打印样式或通过link标签引入独立print.css文件，并注意黑白配色、分页控制及调试技巧。
要让 CSS 样式只在打印时生效，需使用 @media print 媒体查询。这不是“引入专用 CSS 文件”的唯一方式，但最常用、最灵活。
直接在现有 CSS 中写 print 样式
推荐做法：把打印专用规则写在当前样式表里，用
@media print包裹。浏览器会自动忽略这些规则在屏幕显示时的渲染，仅在调出打印预览或执行打印时启用。例如：
@media print { body { font-size: 12pt; color: #000; background: transparent; } .no-print, .navbar, .ads { display: none !important; } .page-break { page-break-before: always; } }通过 link 标签引入独立的打印样式表
如果希望完全分离逻辑，可用
zuojiankuohaophpcnlinkyoujiankuohaophpcn的 media="print" 属性引入专用于打印的 CSS 文件：立即学习“前端免费学习笔记（深入）”；
zuojiankuohaophpcnlink rel="stylesheet" href="print.css" media="print"youjiankuohaophpcn注意：
- 浏览器默认不会下载该文件（除非进入打印流程），有利于首屏性能；
- 不需要加!important也能覆盖屏幕样式，因为媒体查询本身已限定作用域；
- 确保print.css路径正确，且服务器能正常返回该文件。关键细节和常见避坑点
- 颜色尽量用黑白色系，避免依赖背景色——多数打印机默认关闭背景图形打印（Chrome/Firefox 均默认不打背景）；
- 用
page-break-before/after/inside或现代等价的break-before/break-after控制分页，但注意兼容性； - 不要依赖 hover、focus 等交互状态，打印时无鼠标/焦点概念；
- 图片建议设置
max-width: 100%; height: auto;防止溢出纸张； - 调试技巧：在 Chrome DevTools 中按
Ctrl+P（或 Cmd+P）打开打印预览，实时查看效果。
进阶：响应式打印适配
可叠加其他媒体特性，比如针对不同纸张方向优化：
@media print and (orientation: landscape) {
.report-header {
font-size: 14pt;
}
}
@media print and (min-width: 21cm) { /* A4 宽度约 21cm */
.content {
column-count: 2;
}
}这类写法适合报表、文档类页面，提升打印可读性。
