CSS打印-@media Rule

@media 规则允许你根据不同的设备或媒体类型（如屏幕或打印机）调整样式表。在打印时，我们可能需要对页面进行不同的排版处理，而 @media print 就是一个非常好用的工具。

语法

@media print {
  /* 这里是针对打印时应用的样式 */
}

实例

@media print {
  body {
    font-size: 14pt;
    line-height: 1.6;
  }
  
  h1, h2, h3 {
    page-break-after: avoid;
  }
  
  .no-print {
    display: none;
  }
}

解释

在以上示例中，我们设定了打印时的样式：

• 为正文设定了14pt的字号和1.6的行高
• 防止标题在打印时跨页，设定 page-break-after: avoid;
• 隐藏了带有 .no-print 类名的元素，它们不必在打印时显示。

注意事项

• @media print 样式只会在打印时生效，不会影响网页在浏览器中的样式
• @media 规则中同样可以使用其他的媒体查询，例如 @media screen and (max-width: 768px)，这样可以根据不同的设备和屏幕大小设定样式表
• 在打印时，我们通常需要将带有交互性质（如按钮、菜单等）的元素隐藏，以保证打印出的页面可以直接使用
• 打印时会将所有链接默认加上下划线，请根据需求设定 text-decoration: none;。

以上就是关于 CSS @media rule 的介绍。在实际开发中，我们可以根据不同的需求为打印样式表添加更多的样式。