[!info] related notes 浏览器模拟打印模式的方法

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" media="screen">
<link rel="stylesheet" href="print.css" media="print">

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

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

---

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

1. 隐藏不必要的元素

打印时，用户不需要看到导航栏、侧边栏、底部的“联系我们”、广告弹窗或交互按钮。

@media print {
  header, footer, nav, aside, .ad-banner, button, .no-print {
    display: none !important;
  }
}

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

默认情况下，大多数浏览器为了节省墨水会忽略背景颜色和背景图片。最好手动将文字设为黑色，背景设为白色或透明。

@media print {
  * {
    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; 来强制浏览器打印背景，但这通常只用在特定的图表或区块上。)

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;
  }
}

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; 
  
  /* 设置打印机的物理页边距 */
  margin: 2cm; 
}

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