在Web开发中，浏览器默认的打印行为会直接照搬屏幕样式，导致导航栏、侧边栏和深色背景都被打印出来，既浪费墨水又影响阅读。通过CSS的打印媒体查询，我们可以为打印设备单独定义一套样式，从而在用户打印页面时自动切换布局和视觉设计。
一、理解打印媒体类型与@media规则
CSS通过媒体类型区分不同的输出设备。常见的媒体类型包括screen（屏幕）和print（打印）。在早期版本中，我们使用link标签的media属性引入独立打印样式表，例如<link rel="stylesheet" href="print.css" media="print">。但现代开发更推荐在单个样式文件中使用@media规则，便于维护。
@media print块中的样式只在打印预览或实际打印时生效，不会干扰屏幕显示。它的底层原理是浏览器在构建渲染树时，会根据当前输出介质过滤适用的CSS规则。当触发打印时，浏览器切换媒体上下文，重新计算样式，因此我们可以安全地隐藏或重构元素。
1.1 基本语法结构
下面是一个最简化的打印样式包裹方式，所有打印专用规则都写在内部：
/* 屏幕样式 */
body {
font-size: 16px;
background: #f5f5f5;
}
/* 打印样式 */
@media print {
body {
background: #fff;
font-size: 12pt;
}
.sidebar, .ad-banner {
display: none;
}
}
上述代码中，屏幕下body有浅灰背景，而打印时背景变白、字号改用磅值（pt），并隐藏了侧边栏与广告。这种分离让同一份HTML在两种场景呈现不同设计。
二、实战：完整打印样式优化示例
假设我们有一个文章页面，包含顶部导航、正文和底部版权。屏幕上看很美观，但打印时导航和版权占用空间且无用。我们通过打印样式重做布局。
2.1 HTML结构片段
先给出简化的页面结构，注意其中类名用于在CSS中定位：
<header class="site-header"> <nav>首页 文章 关于</nav> </header> <main class="article-content"> <h1>CSS打印样式指南</h1> <p>正文内容示例段落。</p> </main> <footer class="site-footer"> <p>版权所有</p> </footer>
2.2 对应的打印CSS
接下来编写打印规则，隐藏非必要区块，并调整正文宽度与链接显示方式：
@media print {
/* 隐藏导航与页脚 */
.site-header nav,
.site-footer {
display: none !important;
}
/* 正文占满页面 */
.article-content {
width: 100%;
margin: 0;
padding: 0;
}
/* 打印时显示链接地址 */
.article-content a[href]::after {
content: " (" attr(href) ")";
font-size: 10pt;
color: #000;
}
/* 避免代码块被截断到下一页 */
pre {
page-break-inside: avoid;
}
}
这里使用了page-break-inside: avoid来防止代码块跨页断裂，提升打印可读性。同时利用伪元素把链接URL展开，方便纸质阅读者记录出处。
三、常见问题与避坑建议
很多开发者以为只要把背景设白就完成了打印优化，其实盒模型与分页控制同样关键。例如，弹性布局（flex）在打印时可能因宽度计算差异而错乱，建议打印样式中重置为块级流布局。
3.1 分页与边距控制
使用@page规则可统一设置打印页边距，减少浏览器默认差异：
@page {
margin: 2cm;
}
@media print {
h2, h3 {
page-break-after: avoid;
}
img {
max-width: 100% !important;
}
}
上述@page定义了每页留白，page-break-after: avoid避免标题孤行在页尾。图片限制宽度防止溢出。综合这些手段，才能稳定输出整洁文档。
3.2 屏幕与打印样式的维护策略
建议将打印样式集中在文件末尾的@media print块，并添加明确注释。若项目复杂，再拆分为独立print.css通过link引入。无论哪种方式，都应定期用浏览器打印预览校验，确保更改屏幕设计时不破坏打印输出。
通过合理运用CSS打印媒体查询，我们能让同一页面在屏幕与纸张上各自拥有最佳呈现，既节省资源又提升用户体验。
CSS打印样式@media_print打印优化修改时间：2026-08-04 02:24:26