第十一章 · 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;  /* 每章强制另起一页 */
}

打印样式检查清单

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