在页面开发过程中，我们经常会遇到页面在浏览器中显示正常，但是打印出来却出现布局错位、背景丢失、元素被截断等问题，这时候就需要调试Print CSS也就是打印样式。Chrome浏览器内置了专门的打印调试功能，不需要连接打印机就能完成打印效果的预览和样式调整。
开启Chrome打印预览模式
要调试打印样式，首先需要进入Chrome的打印预览模式，操作步骤如下：
- 打开需要调试的页面，按下F12打开开发者工具
- 点击开发者工具右上角的三个点图标，在弹出的菜单中选择更多工具，然后选择渲染
- 在渲染面板中找到模拟CSS媒体类型选项，将其从默认的无修改为print
修改完成后，当前页面的显示效果就会切换为打印样式下的渲染效果，此时页面中应用的@media print相关样式都会生效，你可以直接看到打印后的页面呈现。
定位打印样式问题
进入打印预览模式后，就可以像平时调试普通页面一样排查样式问题：
- 使用元素选择工具点击页面中的元素，查看该元素在打印样式下的CSS规则，确认是否有不符合预期的样式覆盖
- 在样式面板中可以直接修改CSS属性，实时查看修改后的打印效果，确认问题修复方案
- 如果需要查看完整的打印预览效果，可以按下Ctrl+P（Windows）或Command+P（Mac）打开系统打印弹窗，点击弹窗中的更多设置可以调整打印的页边距、纸张大小等参数，查看不同参数下的渲染效果
常用Print CSS调试技巧
1. 基础打印样式设置
首先可以在CSS中定义基础的打印样式，避免默认打印行为带来的问题，示例如下：
/* 打印样式基础设置 */
@media print {
/* 隐藏不需要打印的元素，比如导航栏、广告、按钮等 */
.nav, .ad, .print-btn {
display: none !important;
}
/* 确保文字颜色为黑色，避免浅色文字打印不清 */
body {
color: #000;
background: #fff;
}
/* 避免元素被截断到下一页 */
.page-break {
page-break-after: always;
}
}
2. 处理背景和图片打印问题
Chrome默认打印设置中不会打印背景颜色和背景图片，如果需要打印背景，可以在打印弹窗的更多设置中勾选背景图形选项，同时在CSS中可以添加如下规则确保背景生效：
@media print {
/* 确保背景颜色和背景图片被打印 */
* {
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
}
3. 调整打印页边距和页面尺寸
如果需要自定义打印的页边距和页面尺寸，可以使用@page规则，示例如下：
/* 设置打印页面尺寸和页边距 */
@page {
size: A4; /* 设置纸张大小为A4 */
margin: 2cm; /* 设置页边距为2厘米 */
}
/* 针对第一页设置特殊页边距 */
@page :first {
margin-top: 3cm;
}
注意事项
调试打印样式时需要注意，部分CSS属性在打印场景下不支持，比如position: fixed在打印时可能不会按照预期固定位置，flex布局在部分旧版本打印引擎中可能有兼容问题。如果遇到复杂的打印布局问题，可以尝试将布局切换为传统的block布局，减少兼容问题。另外修改完打印样式后，建议实际打印一份测试页，确认最终效果符合预期。