在css中如何按条件引入打印样式

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

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

使用 @media 指定 print 媒体类型

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

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

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

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

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

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

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

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

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

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

常见应用场景

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

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

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