使用@media print可针对打印环境应用样式，如设置字体、隐藏非必要元素，并通过媒体特性控制分页与纸张适配，提升打印效果。

在 CSS 中，可以通过 @media 查询按条件引入打印样式。最常用的方式是使用媒体类型或媒体特性来针对打印环境应用特定样式。

使用 @media 指定 print 媒体类型

这是最直接的方法，只在打印时生效：

@media print {
  body {
    font-size: 12pt;
    color: black;
  }
  .no-print { display: none; }
}

浏览器在页面打印预览或实际打印时会应用这部分样式，屏幕显示时忽略。

使用媒体特性进行更精细控制

除了判断是否为打印设备，还可以结合其他特性，比如纸张尺寸：

立即学习“前端免费学习笔记（深入）”；

HTML汇报生成器

🚀 不用写一行代码！把项目总结、工作汇报、研究报告、技术文档、提案、数据看板直接变精美HTML。12种主题 × 11种背景动效 × 9种鼠标特效 × 10种边框样式 × 实时调色器 × 毛玻璃卡片 × PDF导出，生成后还能自由调色，零门槛AI直出。触发词：项目总结、工作汇报、PPT、生成报告、做个总结、HTML文档、数据报告、流程文档、会议纪要、技术文档、研究报告、数据看板、提案、做个展示页、帮我做个汇报、文档生成。

下载

@media print and (max-width: 210mm) {
  @page {
    margin: 2cm;
  }
  .content { font-size: 10pt; }
}

这样可以在小尺寸纸张上调整排版，提升打印效果。

在 HTML 中通过 link 标签引入打印专用 CSS 文件

也可以将打印样式写在单独的文件中，并设置 media 属性：

<link rel="stylesheet" type="text/css" href="print.css" media="print">

这个文件只在打印时加载，不会影响页面渲染性能。

常见应用场景

利用条件引入打印样式，通常用于：

• 隐藏导航栏、按钮等不需要打印的元素
• 调整字体大小和颜色，适配纸质阅读
• 控制分页，避免内容被截断
• 设置页边距和纸张方向（横向/纵向）

基本上就这些。关键是用好 @media print，让网页在打印时更清晰、专业。