@media print 是实现样式仅在打印时生效的最标准方式，可直接在样式表中使用或通过 link[media="print"] 引入独立文件，并支持隐藏元素、强制显示、重置颜色及控制分页等技巧。
在 CSS 中，使用 @media print 可以让样式仅在打印预览或实际打印时生效，而不会影响屏幕显示效果。这是实现「只在打印时生效」最标准、最可靠的方式。
用 @media print 包裹打印专用样式
把所有只想在打印时起作用的 CSS 规则，放在 @media print { ... } 块内即可。浏览器会自动识别并仅在打印上下文（如 Ctrl+P 或 window.print()）中应用这些样式。
- 写法示例：
<style>
body { font-size: 16px; }
@media print {
body { font-size: 12pt; }
.no-print { display: none; }
.print-only { display: block; }
}
</style>
- 注意：不需要额外引入外部文件，直接写在现有样式表里就行；
- 所有选择器和声明都支持，包括
!important（但尽量少用）； - 可覆盖屏幕样式，比如隐藏导航栏、调整字体单位（推荐用 pt 或 cm 等物理单位）。
用 link 标签单独引入打印样式表
如果希望打印样式完全独立，可用 <link> 标签配合 media="print" 属性引入专门的 CSS 文件。
立即学习“前端免费学习笔记（深入）”；
- 写法示例：
<link rel="stylesheet" href="print.css" media="print">
- 该文件中的样式默认只在打印时加载和生效，页面正常浏览时完全不解析；
- 适合样式量大、逻辑复杂或需团队分工维护的场景；
- 注意不要同时给它加
media="screen"或不设 media，否则会破坏「仅打印」效果。
常见实用技巧
让打印更干净、更可控，几个高频操作建议：
-
隐藏非内容元素：菜单、广告、侧边栏等加
.no-print { display: none; }； -
强制显示某些内容：比如二维码、页脚版权，用
.print-only { display: block !important; }（需确保原样式没更强优先级）； -
重置颜色与背景：打印机通常不打印背景色，加
color: #000; background: transparent;避免文字看不清； -
控制分页：用
page-break-before: always;或break-inside: avoid;防止表格/卡片被截断。
调试打印样式的小提示
不用每次都真打印，现代浏览器都支持「打印预览」模式：
- Chrome / Edge：按
Ctrl + P→ 左下角点「更多设置」→ 开启「背景图形」查看背景色是否生效； - Firefox：
Ctrl + P后切换到「页面设置」可模拟不同纸张尺寸； - 开发时可在 DevTools 的「Rendering」面板勾选「Emulate CSS media type」→ 选
print，实时查看效果。
