使用@media print媒体查询可使CSS仅在打印时生效，推荐直接在现有CSS中编写打印样式或通过link标签引入独立print.css文件，并注意黑白配色、分页控制及调试技巧。
<p>要让 CSS 样式只在打印时生效，需使用 <strong>@media print</strong> 媒体查询。这不是“引入专用 CSS 文件”的唯一方式，但最常用、最灵活。</p>
<H3>直接在现有 CSS 中写 print 样式</H3>
<p>推荐做法：把打印专用规则写在当前样式表里，用 <code>@media print</code> 包裹。浏览器会自动忽略这些规则在屏幕显示时的渲染，仅在调出打印预览或执行打印时启用。</p>
<p>例如：</p>
<pre class="brush:php;toolbar:false;"><code>@media print {
body {
font-size: 12pt;
color: #000;
background: transparent;
}
.no-print, .navbar, .ads {
display: none !important;
}
.page-break {
page-break-before: always;
}
}</code>
通过 link 标签引入独立的打印样式表
如果希望完全分离逻辑，可用 <link> 的 media="print" 属性引入专用于打印的 CSS 文件：
立即学习“前端免费学习笔记（深入）”；
<code><link rel="stylesheet" href="print.css" media="print"></code>
注意：
- 浏览器默认不会下载该文件（除非进入打印流程），有利于首屏性能；
- 不需要加 !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）打开打印预览，实时查看效果。
进阶：响应式打印适配
可叠加其他媒体特性，比如针对不同纸张方向优化：
<code>@media print and (orientation: landscape) {
.report-header {
font-size: 14pt;
}
}
@media print and (min-width: 21cm) { /* A4 宽度约 21cm */
.content {
column-count: 2;
}
}</code>
这类写法适合报表、文档类页面，提升打印可读性。
