第十一章 · 11.4 节

打印样式

5.1 节讲的媒体查询默认都是针对屏幕（screen）的，但页面被打印或"另存为 PDF"时，屏幕上的很多元素（导航栏、按钮、深色背景）都不该原样出现在纸面上。@media print 就是专门为这类场景准备的媒体类型。

@media print

用法与普通媒体查询一致，只是把媒体类型从（默认的）screen 换成 print：

@media print {
  nav, .sidebar, .no-print {
    display: none;
  }
  body {
    color: #000;
    background: #fff;
  }
}

也可以在 <link> 上直接限定媒体类型，把打印样式拆成独立文件，不影响屏幕样式的加载优先级：

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

常用打印样式

目标	做法
隐藏交互元素	导航、按钮、表单控件、视频播放器一般 `display: none`
深色背景转为白纸黑字	强制 `background: #fff; color: #000`，节省墨水且保证可读
链接显示真实地址	`a::after { content: " (" attr(href) ")"; }`——纸面上点不了链接，把网址打印出来才有意义
阴影 / 渐变去除	大多数打印机无法还原 `box-shadow`、渐变，去掉可避免出现灰色色块
固定定位失效	`position: fixed/sticky` 元素在分页时可能重复出现在每页，通常改为 `static`

分页控制

可以用 break-inside、break-before、break-after 控制内容在分页时的行为，避免一段文字或一张表格被从中间切断：

table, figure, .card {
  break-inside: avoid; /* 尽量不要在这个元素内部分页 */
}
h2 {
  break-after: avoid;  /* 避免标题独自留在一页的最后一行 */
}
.chapter {
  break-before: page;  /* 每章强制另起一页 */
}

打印样式检查清单

发布前自查用浏览器的"打印预览"（而不是猜测）实际检查一遍：交互元素是否已隐藏、深色区块是否变成了大片黑色、表格/图片是否被硬生生切断、链接地址是否需要显式打印出来。这几点是打印样式最容易被忽略、也最容易一次性发现问题的地方。

Chapter 11 · Section 11.4

Print Styles

The media queries covered in Section 5.1 target the screen by default, but when a page is printed or "saved as PDF", many on-screen elements (navigation bars, buttons, dark backgrounds) should not appear on paper as they are. @media print is the media type created specifically for this kind of scenario.

@media print

The usage is the same as a normal media query — you just change the media type from the default screen to print:

@media print {
  nav, .sidebar, .no-print {
    display: none;
  }
  body {
    color: #000;
    background: #fff;
  }
}

You can also restrict the media type directly on the <link> tag and split the print styles into a separate file, without affecting the loading priority of the screen styles:

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

Common Print Styles

Goal	Approach
Hide interactive elements	Navigation, buttons, form controls, and video players are usually `display: none`
Turn dark backgrounds into black-on-white	Force `background: #fff; color: #000` to save ink and keep the text readable
Show the real URL of links	`a::after { content: " (" attr(href) ")"; }` — links cannot be clicked on paper, so printing the URL is what makes them useful
Remove shadows / gradients	Most printers cannot reproduce `box-shadow` or gradients; removing them avoids gray smudges
Disable fixed positioning	`position: fixed/sticky` elements may repeat on every page when paginated; usually switch them to `static`

Page Break Control

You can use break-inside, break-before, and break-after to control how content behaves when it is paginated, keeping a paragraph or a table from being cut in half:

table, figure, .card {
  break-inside: avoid; /* try not to break inside this element */
}
h2 {
  break-after: avoid;  /* keep a heading from being left alone on the last line of a page */
}
.chapter {
  break-before: page;  /* force each chapter onto a new page */
}

Print Styles Checklist

Pre-publish self-checkRun through the browser's "Print Preview" (rather than guessing) and actually check: whether interactive elements are hidden, whether dark blocks have become large black areas, whether tables/images are cut off abruptly, and whether link URLs need to be printed explicitly. These are the points most often overlooked in print styles, and where problems are easiest to spot all at once.