网页打印样式适配

使用媒体查询@media print可以指定设置打印的样式。

@media print {
  body {
    line-height: 1.5;
  }
}

使用该属性，我们可以轻松的控制页面的显示样式和打印样式不一样。比如，在打印的时候隐藏区域，可以写一个 css 样式隐藏。

@media print {
  .no-print {
    display: none;
  }
}

只需要将no-print添加到元素的class中，正常显示时不起作用，打印时起到隐藏的效果。

还可以使用 style 标签，指定 media 的值为 print，同样可以设置打印样式。

<style media="print">
  .body {
    line-height: 1.5;
  }
</style>