[!info] related notes

• 浏览器模拟打印模式的方法
• Tailwind 打印实践

css media print

Overview

CSS 的 @media print 是一种媒体查询（Media Query），专门用于定义网页在**打印（或导出为 PDF）**时的样式。

因为屏幕阅读和纸质阅读的体验完全不同，屏幕上好看的设计（比如深色模式、复杂的导航栏、动态效果）在纸上往往不仅浪费墨水，还会导致排版混乱。使用 @media print 可以帮你打造干净、易读的纸质版本。

Example

一、 如何引入打印样式？

你可以通过三种主要方式应用打印样式：

1. 在现有的 CSS 文件中使用 @media print

/* 屏幕和打印共用的基础样式 */
body {
  font-family: sans-serif;
}

/* 仅在打印时生效的样式 */
@media print {
  body {
    font-family: serif; /* 示例选择，按文档与字体可读性决定 */
    font-size: 12pt;
  }
}

2. 通过 <link> 标签引入单独的 CSS 文件

<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="print.css" media="print">

3. 在 @import 中指定媒体类型

@import url("print.css") print;

---

二、 打印样式的 5 个核心技巧

1. 隐藏不必要的元素

为不需要打印的交互区域显式添加 .no-print；不要按标签一概隐藏，文档的 header、footer 或 aside 可能包含正文。

@media print {
  .no-print {
    display: none !important;
  }
}

2. 重置颜色与背景（省墨模式）

默认情况下，大多数浏览器为了节省墨水会忽略背景颜色和背景图片。可以为正文设置黑白打印样式；下面是可选省墨规则，不应用于需要保留颜色语义的图表，也不保证覆盖所有后代的独立样式。

@media print {
  .print-document {
    color: #000 !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
}

(注意：如果确实需要打印背景色，可以通过 -webkit-print-color-adjust: exact; 或 print-color-adjust: exact; 来请求保留颜色，但浏览器和用户设置可以覆盖该请求；!important 也不能强制用户启用背景图形。)

3. 展开链接 URL

在纸上，用户无法点击超链接。你可以用 CSS 伪元素提取 href 属性并显示在链接文字旁边。

@media print {
  a {
    text-decoration: underline;
  }
  /* 将 URL 附在链接文字后面 */
  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.9em;
    color: #555;
  }
  /* 避免打印内部锚点链接或 javascript 占位符 */
  a[href^="#"]::after,
  a[href^="javascript:"]::after {
    content: "";
  }
}

4. 控制分页（Page Breaks）

这是打印排版中最让人头疼的部分：标题出现在页尾，或者一张图片/表格被硬生生切成了两半。你可以使用 break- 属性来控制。

@media print {
  /* 尽量避免标题与后文之间分页；不影响标题前的断点 */
  h1, h2, h3 {
    break-after: avoid;
    page-break-after: avoid; /* 兼容老版本 */
  }

  /* 尽量保持短内容块完整；超出单页的内容仍可能分页 */
  img, table, pre, blockquote {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* 强制在每个大章节前换新页 */
  .chapter {
    break-before: page;
    page-break-before: always;
  }
}

avoid 不是绝对保证；超长表格、图片或代码块需检查溢出和实际分页，不能仅靠避断规则。

5. 调整页面宽度和去除滚动

屏幕上的多列布局在纸上通常很挤。打印时最好将主内容区域宽度设为 100%，并移除多余的内外边距。

@media print {
  .main-content {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
  }
}

---

三、 使用 @page 设置纸张规格

除了 @media print，CSS 还有一个专门的 @page 规则，用于设置打印页面的物理属性，比如纸张大小（A4、Letter）和页边距。

@page {
  /* 设置纸张为 A4 纵向 (portrait) 或 横向 (landscape) */
  size: A4 portrait; 
  
  /* 设置 CSS 页面盒边距，实际输出还受打印设置约束 */
  margin: 2cm; 
}

/* 甚至可以单独设置第一页的边距 */
@page :first {
  margin-top: 5cm;
}

普通无媒体限制的 CSS 仍参与打印层叠。@media print 不会自行打开打印对话框，@page 也不等于修改打印机的硬件能力。

参考

• MDN：Printing
• MDN：print-color-adjust