网页打印样式CSS

相信大多数的前端工程师都是处理显示屏上面的设计，用到最多的计量单位就是px,但是有些时候，我们难免也会有打印的需求，比如一个电商平台的“物流配送打印单”，“打印订单”等等可能都是需要从网友上打印出来的，这个时候如果还是按照自己以前写网页的思路写打印单页面，最后打印出来的效果会不是很理想。下面我们就来看看有什么注意的事项。

一、在说之前！我们先来理解两个概念，一个是px,一个是pt

1、px就是表示pixel，像素，是屏幕上显示数据的最基本的点；px是一个点，它不是自然界的长度单位,可以画的很小，也可以很大。如果点很小，那画面就清晰，称它为“分辨率高”，反之，就是“分辨率低”。所以，“点”的大小是会“变”的，也称为“相对长度”。

2、pt就是point，是印刷行业常用单位，等于1/72英寸,确切的说法是一个专用的印刷单位“磅”,以它是一个自然界标准的长度单位，也称为“绝对长度”。

在网页设计中，用户的屏幕的基本单位是px，因此用px作为单位是最简单也最容易理解的，而用pt作为单位也不过是通过了Windows的设置乘上了一个比率转变成px再显示。

如果使用Word和Photoshop的主要目的仅仅是为了输出打印。使用pt就更方便，当打印到实体时，pt作为一个自然长度单位就方便实用了：比如Word中普通的文档都用“宋体 9pt”，标题用“黑体 16pt”等等，无论电脑怎么设置，打印出来永远就是这么大。
总结：

　px：pixel，像素，屏幕上显示的最小单位，用于网页设计，直观方便；

  pt：point，是一个标准的长度单位，1pt＝1/72英寸，用于印刷业，非常简单易用；

  em：即％，在CSS中，1em＝100％，是一个比率，结合CSS继承关系使用，具有灵活性。

  PPI（DPI）：pixel（dot）per inch，每英寸的像素（点）数，是一个率，表示了“清晰度”，“精度”

　PX和PT转换的公式：

  以前在文章中介绍过PX和PT的转换规则，pt=px乘以3/4。

  如12px×3/4=9pt大小。

  PX和em转换的公式：

  对于PX转em的方法也类似，就是em=16乘以px，也就是说1.5em=1.5×16=24px

二、理解了上面的概念，我们再来具体看看怎么优化网页打印样式：
首先，我们可以准备2套样式，一套正常的css网页展示的样式，另一套专门给打印的时候用的CSS样式，只要用户打印，就会通过媒体查询自动用打印的专门样式。这样，既可以在浏览器很好展示效果，也不影响具体打印出来的效果。

//正常浏览器用的样式

<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指定的属性就是设备，显示器上就是screen，打印机则是print，电视是tv，投影仪是projection。

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

专门打印样式中的一些优化：

（1）用点数指定大小

在打印样式表里,用点数制定字体大小是件十分合理的事情.在这份打印样式表中,首先就为<body>标签定义基础字体大小 -- 使用"点"单位.

body {

font-family: "Times New Roman", serif;

font-size: 12pt;

}

比起用像素单位来说,这个应该更能想象12点字体会印多大,同时我们也选用serif字体,这种字体打印出来比较细致,而且比较容易阅读.

（2）用毫米(mm)写宽高

这时候，我们写类似width,height,margin的时候就不能用PX了，要用mm,(因此必须要设计师设计一份以photoshop中以点为单位的效果图，然后切图的时候就是有多宽就对应HTML中多少毫米)

（3）隐藏不必要的标签节省墨水

#nav, #sidebar, #advertising, #search {

display: none;

}

通过在打印样式表里设定display:none;我们就能使打印结果隐藏掉这些元素.

（4）去掉背景图片和颜色

body {

  background: none;

  }

这个方法去掉其他标签在屏幕样式里指定的背景图片,颜色.这样做节省墨水,且让打印结果更好阅读

 三、打印样式表注意事项：
 1、打印样式表中最好不要用背景图片，因为打印机不能打印CSS中的背景。如要显示图片，请使用html插入到页面中。
 2、最好不要使用像素作为单位，因为打印样式表要打印出来的会是实物，所以建议使用pt和cm。
 3、隐藏掉不必要的内容。（@print div{display:none;}）
 4、打印样式表中最好少用浮动属性，因为它们会消失。
 7、如果想要知道打印样式表的效果如何，直接在浏览器上选择打印预览就可以了。

  欢迎加入大前端交流群！群号：277942610，VIP新群