17370845950

@media print 是实现样式仅在打印时生效的最标准方式，可直接在样式表中使用或通过 link[media="print"] 引入独立文件，并支持隐藏元素、强制显示、重置颜色及控制分页等技巧。

在 CSS 中，使用 @media print 可以让样式仅在打印预览或实际打印时生效，而不会影响屏幕显示效果。这是实现「只在打印时生效」最标准、最可靠的方式。

用 @media print 包裹打印专用样式

把所有只想在打印时起作用的 CSS 规则，放在 @media print { ... } 块内即可。浏览器会自动识别并仅在打印上下文（如 Ctrl+P 或 window.print()）中应用这些样式。

• 写法示例：

• 注意：不需要额外引入外部文件，直接写在现有样式表里就行；
• 所有选择器和声明都支持，包括 !important（但尽量少用）；
• 可覆盖屏幕样式，比如隐藏导航栏、调整字体单位（推荐用 pt 或 cm 等物理单位）。

用 link 标签单独引入打印样式表

如果希望打印样式完全独立，可用 标签配合 media="print" 属性引入专门的 CSS 文件。

• 写法示例：

• 该文件中的样式默认只在打印时加载和生效，页面正常浏览时完全不解析；
• 适合样式量大、逻辑复杂或需团队分工维护的场景；
• 注意不要同时给它加 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，实时查看效果。