Skip to main content

如何优化网页的打印样式？

可以准备 2 套样式，一套正常的 css 网页展示的样式，另一套专门给打印的时候用的 css 样式，只要用户打印，就会通过媒体查询自动用打印的专门样式 print[prɪnt]。这样既可以在浏览器很好展示效果，也不影响具体打印出来的效果。

指定媒体的两种方法：

指定 Media 属性（外部样式）

//正常浏览器用的样式
<link rel="stylesheet" type="text/css" media="screen" href="/css/styles.css" />

//专门打印用的样式
<link rel="stylesheet" type="text/css" media="print" href="/css/print.css" />

@media 或@import（内部样式）

<style type="text/css">
    /* 正常浏览器用的样式 */
  @import url("screenstyles.css") screen;

    /* 打印时使用的样式放置在此 */
  @media print {
      body {
        margin: 0; padding: 20px;
      }
  }
</style>

通过为 styles.css 指定 screen,就能确保 styles.css 包含的样式只会对电脑屏幕使用，同样的,把 media 属性设为 print 就能确保 print.css 包含的样式只在使用者打印页面时使用。

注意事项

打印机样式表中最好不要用背景图片，因为打印机不能打印 CSS 中的背景。如要显示图片，请使用 html 插入到页面中。
最好不要使用像素作为单位，因为打印样式表要打印出来的会是实物，所以建议使用 pt 和 cm。
隐藏掉不必要的内容。（@print div{display:none;}）
打印样式表中最好少用浮动属性，因为他们会消失。

指定媒体的两种方法：
注意事项