在网页设计与印刷输出的对比中，打印友好性越来越成为衡量一个站点专业性的指标。通过 CSS 的 @media print，可以为打印版本创建独立的样式表，控制隐藏/显示元素、分页、字号等。核心理念是将媒体查询限定为打印设备并优化纸张输出。本文聚焦 CSS打印样式设置方法：@media print详解与实战技巧。
1.1 打印样式的目标
1.1.1 提升文本可读性
在设计打印样式时，优先级是确保文本的可读性、移除不必要的界面元素、以及优化页面分布。通过调整字号和行距，可以使正文在纸上更易阅读。
一个成功的打印版应该具备一致的排版、清晰的标题层级，以及稳定的页面结构，以便用户在纸上快速定位信息。
1.1.2 精简页面内容
打印版需要筛选出与内容相关的要点，隐藏导航、按钮、广告等，以减少无关信息的干扰。使用 选择性隐藏 可以避免浪费纸张。
通过为打印专用区域设定边界，可以确保核心内容保持整洁且不被多余元素打断。
1.2 @media print 的核心作用
1.2.1 基本工作原理
@media print 将以下样式仅在打印设备上生效，用于覆盖屏幕样式。优先级规则允许打印样式覆盖屏幕样式，从而实现专门的排版与效果。
通过定义打印特定的选择器和属性，可以实现分页、隐藏、字体调整等目标，确保纸质版本的体验一致且可控。
/***** 打印版初始设置 *****/
@media print {/* 隐藏不必要的界面元素 */.screen-only { display: none !important; }/* 打印文本的基本排版 */body { font-family: "Times New Roman", serif; font-size: 12pt; color: #000; background: #fff; }
}
2. @page 与分页控制实战
2.1 @page 基本用法
@page 用于设置纸张尺寸和边距，避免边缘截断，确保内容留出足够空白区域，便于装订和切边。合理的边距有助于提升整页印刷的专业感。
结合 分页断点 可以实现按章节换页，提升输出的可读性与阅读体验，尤其在长文档中显著提升可维护性。
2.2 分页相关属性
CSS 提供多种分页相关属性，如 page-break-before/after/inside、break-before/after/inside，以及 margin 与 padding 的适配。在打印时，设置断点可以避免段落被不合适地截断。
通过合理的分页策略，能够降低空白页的产生概率，并确保重要信息不被拆分在不理想的位置。
@page {size: A4;margin: 1in;
}
@media print {/* 强制章节前分页，避免混排到同一页 */h2 { page-break-before: always; }/* 避免段落在页面中间断裂 */.avoid-break { page-break-inside: avoid; }
}
3. 实践中的样式策略与常见陷阱
3.1 隐藏与显示策略
设计一个明确的打印区域，是保证核心内容在纸上正确呈现的关键。核心内容应当突出，且不被导航、侧边栏等干扰。
使用 条件隐藏，确保只在打印版本中显示需要的文本与图表，避免无关信息占据版面。
3.2 字体与色彩的可读性
在纸质输出中，对比度和字号至关重要，优先使用黑色文本与深色标题，避免彩色文本在黑白打印中失去可读性。
通过调整 字号、行高、以及段落间距，可以显著提升打印版本的可读性与美观度。
@media print {body { color: #000; background: #fff; }h1, h2, h3 { page-break-after: avoid; }
}
