CSS `Print Media` (`@media print`) 高级排版与打印优化

各位观众老爷，晚上好！我是你们的老朋友，今晚咱们聊点硬核的，关于CSS Print Media的那些事儿，也就是打印样式。别一听“打印”就觉得老掉牙，要知道，优雅的打印样式，能让你在纸质世界也能秀一把高端操作。

第一章：打印样式，被遗忘的角落？

现在都什么年代了，谁还天天打印？这是很多人的第一反应。但别忘了，合同、报告、账单，甚至你精心设计的简历，最终很可能都要面对打印机。一份排版混乱、惨不忍睹的打印稿，会瞬间拉低你的专业形象。所以，掌握打印样式，绝对能提升你的逼格。

想想你辛辛苦苦用CSS把网页搞得花枝招展，结果用户一打印，全乱套了，图片溢出，文字重叠，颜色糊成一团，那感觉，就像精心打扮的美女卸了妆，惨不忍睹。所以，@media print 就是你的救星。

第二章：@media print 基础操作：声明与应用

@media print 就像一个秘密通道，只有在打印或者预览打印时才会生效。它告诉浏览器：“嘿，老兄，准备打印了，用这套样式！”

最简单的用法，就是在你的CSS文件里添加一个 @media print 块：

/* 默认样式 */
body {
  font-family: Arial, sans-serif;
  font-size: 16px;
  color: #333;
}

/* 打印样式 */
@media print {
  body {
    font-size: 12pt; /* 打印时字体更大 */
    color: #000; /* 黑色更清晰 */
  }
  /* 其他打印样式 */
}

或者，你也可以使用 <link> 标签，单独引入一个打印样式表：

<link rel="stylesheet" href="style.css"> <!-- 默认样式 -->
<link rel="stylesheet" href="print.css" media="print"> <!-- 打印样式 -->

这种方式更清晰，也方便管理。print.css 里只放打印相关的样式，互不干扰。

第三章：打印优化：让你的打印稿焕然一新

好了，有了 @media print，接下来就是各种优化技巧了。

3.1 隐藏不需要的内容

网页上有很多花里胡哨的东西，比如导航栏、广告、侧边栏、各种按钮，打印的时候统统不需要。用 display: none 让他们消失：

@media print {
  nav,
  aside,
  .ad,
  button {
    display: none;
  }
}

3.2 调整字体和颜色

打印稿追求清晰易读，不要用花哨的字体，颜色也尽量简单。

@media print {
  body {
    font-family: "SimSun", serif; /* 宋体，打印标配 */
    color: #000; /* 黑色 */
    background-color: #fff; /* 白色背景 */
  }

  h1, h2, h3 {
    color: #000; /* 标题也用黑色 */
  }

  a {
    color: #000; /* 链接也用黑色 */
    text-decoration: none; /* 去掉下划线 */
  }
}

*3.3 控制页面分割：`page-break-` 属性**

有时候，内容会被硬生生分割在两页上，影响阅读体验。page-break-* 属性可以帮你控制页面分割。

page-break-before: 在元素之前插入分页符
page-break-after: 在元素之后插入分页符
page-break-inside: 控制元素内部是否允许分页

@media print {
  h2 {
    page-break-after: avoid; /* 避免标题出现在下一页的开头 */
  }

  table {
    page-break-inside: avoid; /* 避免表格被分割在两页上 */
  }

  .chapter {
    page-break-before: always; /* 每个章节都另起一页 */
  }
}

3.4 处理图片和表格

图片太大可能会溢出页面，表格太宽可能会变形。需要进行适当的调整。

@media print {
  img {
    max-width: 100%; /* 图片宽度不超过页面宽度 */
    height: auto; /* 高度自适应 */
  }

  table {
    width: 100%; /* 表格宽度占满页面 */
    border-collapse: collapse; /* 合并边框 */
  }

  th,
  td {
    border: 1px solid #ccc; /* 添加边框 */
    padding: 5px; /* 增加内边距 */
  }
}

3.5 显示链接的 URL

网页上的链接点击就能跳转，但打印出来就失效了。可以在链接后面显示 URL，方便用户手动输入。

@media print {
  a::after {
    content: " (" attr(href) ")"; /* 在链接后面显示 URL */
  }
}

3.6 打印特定区域

有时候，你只想打印页面的一部分内容，比如一篇文章，一个表格。可以用JavaScript控制打印。

<button onclick="printContent('content')">打印内容</button>

<div id="content">
  <h1>文章标题</h1>
  <p>文章内容...</p>
</div>

<script>
  function printContent(el){
    var restorepage = document.body.innerHTML;
    var printcontent = document.getElementById(el).innerHTML;
    document.body.innerHTML = printcontent;
    window.print();
    document.body.innerHTML = restorepage;
  }
</script>

这段代码会将 id="content" 的内容提取出来，替换整个 body 的内容，然后调用 window.print() 打印，最后再恢复原来的页面。

第四章：高级技巧：更上一层楼

掌握了基本操作，可以尝试一些高级技巧，让你的打印样式更上一层楼。

4.1 使用 CSS Columns 分栏

对于长篇文章，可以使用 CSS Columns 分栏，提高阅读效率。

@media print {
  .article {
    column-count: 2; /* 分成两栏 */
    column-gap: 20px; /* 栏间距 */
  }
}

4.2 生成目录

对于长篇文档，生成目录可以方便用户查找内容。可以使用 JavaScript 自动生成目录，并添加到打印样式中。

（这里省略具体的 JavaScript 代码，因为比较复杂，但思路就是遍历标题元素，生成链接，添加到指定位置）

4.3 避免图片被切割

有时候，图片会被硬生生切割在两页上，影响美观。可以使用一些技巧避免这种情况。

尽量将图片放在段落的开头或结尾。
使用 page-break-inside: avoid 属性，但效果可能不理想。
如果图片比较重要，可以考虑缩小图片尺寸。

4.4 针对不同纸张尺寸优化

不同的纸张尺寸（A4, Letter）打印效果可能不同。可以使用 @page 规则针对不同的纸张尺寸进行优化。

@media print {
  @page {
    size: A4; /* 设置纸张尺寸为 A4 */
    margin: 2cm; /* 设置页边距 */
  }
}

你也可以针对 Letter 纸张进行单独设置：

@media print {
  @page {
    size: letter;
    margin: 1in;
  }
}

4.5 打印背景图片和颜色

默认情况下，浏览器不会打印背景图片和颜色，因为这会浪费墨水。如果你想打印背景，可以使用 -webkit-print-color-adjust: exact; 属性。

@media print {
  body {
    -webkit-print-color-adjust: exact; /* 打印背景颜色和图片 */
  }
}

第五章：实战案例：简历打印优化

咱们来个实战案例，优化一份简历的打印样式。

5.1 原始简历 HTML 结构

<!DOCTYPE html>
<html>
<head>
  <title>我的简历</title>
  <link rel="stylesheet" href="resume.css">
  <link rel="stylesheet" href="print.css" media="print">
</head>
<body>
  <header>
    <h1>张三</h1>
    <p>求职意向：前端工程师</p>
  </header>
  <section id="contact">
    <h2>联系方式</h2>
    <ul>
      <li>电话：13800138000</li>
      <li>邮箱：[email protected]</li>
      <li>GitHub：github.com/zhangsan</li>
    </ul>
  </section>
  <section id="education">
    <h2>教育经历</h2>
    <article>
      <h3>XX 大学</h3>
      <p>本科，计算机科学与技术</p>
      <p>2018-2022</p>
    </article>
  </section>
  <section id="skills">
    <h2>技能</h2>
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
    </ul>
  </section>
  </body>
</html>

5.2 resume.css 样式 (部分)

body {
  font-family: Arial, sans-serif;
  margin: 20px;
}

header {
  text-align: center;
  margin-bottom: 20px;
}

h1 {
  font-size: 2em;
}

h2 {
  border-bottom: 1px solid #ccc;
  padding-bottom: 5px;
}

5.3 print.css 打印样式

@media print {
  body {
    font-size: 12pt;
    color: #000;
  }

  header {
    text-align: left; /* 打印时左对齐 */
  }

  #contact ul {
    list-style: none; /* 去掉列表符号 */
    padding: 0;
  }

  a {
    color: #000;
    text-decoration: none;
  }

  a::after {
    content: " (" attr(href) ")"; /* 显示 URL */
  }

  /* 隐藏 GitHub 图标 */
  /* GitHub 图标通常通过 CSS 背景图片实现，这里假设图标的 class 是 .github-icon */
  .github-icon {
    display: none;
  }

  /* 优化教育经历的排版 */
  #education article {
    margin-bottom: 10px;
  }

  #skills ul {
    list-style: square; /* 使用方块列表符号 */
  }

  /* 避免技能列表被分割在两页上 */
  #skills {
    page-break-inside: avoid;
  }

  @page {
    margin: 1in; /* 设置页边距 */
  }
}

5.4 效果对比

功能	默认样式	打印样式
字体	Arial, 16px, #333	SimSun, 12pt, #000
链接	有颜色，有下划线	黑色，无下划线，显示 URL
GitHub 图标	显示	隐藏
header 对齐方式	居中	左对齐
列表符号	默认样式	联系方式无符号，技能列表方块符号
页面分割	可能存在内容被分割在两页上的情况	尽量避免内容被分割在两页上

第六章：调试与测试

打印样式的调试比较麻烦，不能像网页那样实时预览。

使用浏览器的打印预览功能： 这是最常用的方法。在浏览器里按下 Ctrl+P (Windows) 或 Cmd+P (Mac)，就可以预览打印效果。
使用浏览器的开发者工具： 可以在开发者工具里模拟打印样式。在 Chrome 开发者工具里，选择 "Rendering" 标签，然后勾选 "Emulate CSS media" 并选择 "print"。
真实打印： 最终还是要打印出来看看效果。

第七章：总结与展望

@media print 虽然看起来简单，但要做好却需要耐心和细致。希望今天的讲解能让你对打印样式有更深入的了解。

记住，优雅的打印样式，能让你在纸质世界也能秀一把高端操作！下次面试，不妨把你的简历打印出来，让面试官眼前一亮。

好了，今天的讲座就到这里，感谢大家的收听！咱们下期再见！

发表回复 取消回复

发表回复取消回复