打印样式：`@media print` 定制打印页面布局

打印，打印，别让它再“黑白无常”了！—— `@media print` 解锁你的专属打印姿势

想象一下，你辛辛苦苦写了一篇报告，排版精美，图文并茂，在电脑屏幕上看着赏心悦目。结果，你满怀期待地按下 Ctrl+P，打印出来的东西却面目全非：图片被截断，排版乱成一锅粥，原本精心设计的颜色也变成了黑白灰的单调世界。是不是很想抓狂？

别急，这并非世界末日，也不是打印机的阴谋，而是你忽略了打印这个特殊场景。屏幕上的完美呈现，并不意味着在纸上也能同样精彩。好消息是，我们有秘密武器可以驯服这头“黑白无常”的打印机，让它乖乖听话，打印出你想要的样子！

这个秘密武器就是 CSS 的 @media print 规则。它就像一个魔法开关，专门用来控制打印时的样式，让你的网页在打印时展现出最佳状态。

为什么需要 `@media print`？

你可能会问：“我的网页在浏览器里显示得很好，为什么还要专门为打印定制样式呢？” 这是一个很好的问题，答案很简单：屏幕和纸张是两种截然不同的媒介。

屏幕是彩色的，纸张通常是黑白的（或者灰度的）。 屏幕可以显示丰富的色彩，而打印机则通常只能打印黑白或者灰度。如果你不加干预，那些鲜艳的颜色在打印时可能变成一片模糊的灰色，甚至会影响文字的可读性。
屏幕是动态的，纸张是静态的。 屏幕可以滚动、缩放、交互，而纸张则只能呈现静态的内容。那些依赖交互效果的内容，比如悬停时的提示，在打印时就毫无意义。
屏幕的尺寸和分辨率是可变的，纸张的尺寸是固定的。 你的网页可能需要在各种尺寸的屏幕上显示，而打印机的纸张尺寸通常是 A4 或者 Letter。如果你的网页布局过于复杂，或者依赖于特定的屏幕尺寸，那么在打印时就可能出现排版错乱。
屏幕有超链接，纸张没有。 在网页上，你可以点击链接跳转到其他页面，但是在纸上，这些链接就变成了毫无意义的文本。如果你想让读者知道链接指向哪里，就需要把 URL 地址打印出来。

总而言之，我们需要 @media print 来解决这些差异，让打印出来的文档更清晰、更简洁、更易读。

`@media print` 的基本用法

@media print 的用法非常简单，就像一个普通的 CSS 规则一样。你只需要在你的 CSS 文件中添加一个 @media print 块，然后在里面定义打印时要应用的样式即可。

@media print {
  /* 在这里定义打印时的样式 */
  body {
    font-size: 12pt;
    color: #000;
  }

  h1 {
    font-size: 18pt;
    color: #000;
  }

  /* 隐藏不需要打印的元素 */
  .no-print {
    display: none;
  }
}

在这个例子中，我们定义了打印时的字体大小、颜色，并且隐藏了所有带有 no-print 类的元素。

你也可以在 HTML 文件中使用 <link> 标签来指定一个专门用于打印的 CSS 文件：

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

这样，当用户点击打印按钮时，浏览器就会自动加载 print.css 文件，并应用其中的样式。

`@media print` 的常见技巧

掌握了 @media print 的基本用法之后，我们就可以开始学习一些更高级的技巧，让打印效果更上一层楼。

移除不需要打印的元素。 网页上有很多元素是不需要打印的，比如导航栏、侧边栏、广告、按钮等等。我们可以使用 display: none; 或者 visibility: hidden; 来隐藏这些元素。
```
@media print {
  nav,
  aside,
  .ad,
  button {
    display: none;
  }
}
```
调整字体大小和颜色。 在打印时，我们应该使用更大的字体大小，以提高可读性。同时，我们应该使用黑色或者深灰色的字体颜色，以确保文字在黑白纸张上清晰可见。
```
@media print {
  body {
    font-size: 12pt;
    color: #000;
  }
}
```
优化图片显示。 默认情况下，浏览器可能会将图片按照原始尺寸打印出来，这可能会导致图片过大或者过小。我们可以使用 width 和 height 属性来控制图片的大小，也可以使用 max-width: 100%; 来确保图片不会超出纸张的边界。
```
@media print {
  img {
    max-width: 100%;
    height: auto;
  }
}
```
显示链接的 URL 地址。 在网页上，我们可以直接点击链接跳转到其他页面，但是在纸上，这些链接就变成了毫无意义的文本。为了让读者知道链接指向哪里，我们可以使用 CSS 的 content 属性来显示链接的 URL 地址。
```
@media print {
  a::after {
    content: " (" attr(href) ")";
  }
}
```
这段代码会在每个链接的后面添加一个括号，并在括号里显示链接的 URL 地址。
强制分页。 有时候，我们希望在特定的元素之前或者之后强制分页，比如在每个章节的开头。我们可以使用 page-break-before 和 page-break-after 属性来实现这个效果。
```
@media print {
  h1 {
    page-break-before: always; /* 在每个 h1 元素之前强制分页 */
  }

  h2 {
    page-break-after: avoid; /* 尽量避免在 h2 元素之后分页 */
  }
}
```
page-break-before 和 page-break-after 属性有以下几个可选值：
- auto：默认值，由浏览器自动决定是否分页。
- always：总是分页。
- avoid：尽量避免分页。
- left：在左侧分页（适用于双面打印）。
- right：在右侧分页（适用于双面打印）。
添加页眉和页脚。 我们可以使用 CSS 的 @page 规则来添加页眉和页脚。
```
@media print {
  @page {
    margin: 1cm; /* 设置页边距 */

    @top-left {
      content: "Document Title"; /* 在页眉的左上角显示文档标题 */
    }

    @top-right {
      content: "Page " counter(page) " of " counter(pages); /* 在页眉的右上角显示页码 */
    }

    @bottom-center {
      content: "© 2023 Your Company"; /* 在页脚的底部居中显示版权信息 */
    }
  }
}
```
在这个例子中，我们设置了页边距，并在页眉的左上角显示文档标题，在页眉的右上角显示页码，在页脚的底部居中显示版权信息。

@page 规则可以用来设置页面的各种属性，比如页边距、纸张大小、方向等等。它还提供了一些特殊的选择器，比如 @top-left、@top-right、@bottom-left、@bottom-right、@bottom-center，用来指定页眉和页脚的内容。

避免踩坑，让打印更顺畅

在使用 @media print 的过程中，我们可能会遇到一些问题，这里总结了一些常见的坑，希望能帮助你避免踩坑，让打印更顺畅。

不要过度依赖颜色。 在打印时，颜色可能会失真，甚至变成一片灰色。因此，我们应该尽量避免过度依赖颜色来区分不同的元素，而应该使用更可靠的方式，比如边框、阴影、字体等等。
不要使用绝对单位。 在屏幕上，我们可以使用像素（px）等绝对单位来定义元素的大小和位置，但是在打印时，这些绝对单位可能会导致排版错乱。因此，我们应该尽量使用相对单位，比如百分比（%）、em、rem 等等。
测试，测试，再测试。 在完成打印样式的设计之后，一定要进行充分的测试，确保打印出来的效果符合预期。可以使用浏览器的打印预览功能来进行测试，也可以直接打印出来进行测试。

总结：让你的网页在纸上也能熠熠生辉

@media print 是一个非常强大的 CSS 规则，它可以让我们为打印这个特殊场景定制样式，让我们的网页在纸上也能熠熠生辉。

通过使用 @media print，我们可以：

移除不需要打印的元素，让打印出来的文档更简洁。
调整字体大小和颜色，提高可读性。
优化图片显示，确保图片在纸张上清晰可见。
显示链接的 URL 地址，方便读者了解链接指向哪里。
强制分页，控制文档的结构。
添加页眉和页脚，提供更多的信息。

掌握了 @media print 的技巧，你就可以告别“黑白无常”的打印效果，让你的网页在纸上也能展现出最佳状态。下次打印之前，记得用 @media print 给你的网页化个妆，让它在纸上也能美美哒！

打印，打印，别让它再“黑白无常”了！—— @media print 解锁你的专属打印姿势

为什么需要 @media print？

@media print 的基本用法

@media print 的常见技巧