2年前研究过关于网页如何打印的问题http://cz1.me/post/12，当年是使用像素与打印出来的尺寸之间的关系手动换的，并且为了兼顾显示与打印，效果十分有限。幸运的是现在有了新的解决方法，并且相当的完善，几乎可以实现想要的任何效果，那就是使用CSS+DIV或元素ID：页面本身的HTML元素无需修改，通过不同的CSS来指定屏显和打印时候的样式。

一、如何实现屏显和打印的区别：

通常我们会如下设置CSS：

1

2

3.demo1{...}

4.demo2{...}

5.demo3{...}

6

7

8

9

实际上这个时候我们省略了一个叫做media属性，它是用来指定CSS的有效范围的。加上media属性的书写方法应该是这样：

01

02

03@media all{

04.demo1{...}

05.demo2{...}

06.demo3{...}

07}

08

09

10

11

当然这样写和不加media属性是一样的，范围都是all，下面解释一下media其他值的意思:media属性的值含义

all用于所有设备类型

aural用于语音和音乐合成器

braille用于触觉反馈设备

embossed用于凸点字符(盲文)印刷设备

handheld用于小型或手提设备

print用于打印机

projection用于投影图像，如幻灯片

screen用于计算机显示器

tty用于使用固定间距字符格的设备。如电传打字机和终端

tv用于电视类设备

实际上因为规范尚未统一，并不是所有值都可以用的，不过目前可以确认的是，主流的三款浏览器内核IE、火狐和Chrome都支持了all、screen和print，对于打印来说足够了。

那么在需要区分打印和屏幕显示的页面，我们就可以这样书写CSS:

01

02

03@media screen{

04.demo1{...}

05.demo2{...}

06.demo3{...}

07}

08@media print{

09.demo1{......}

10.demo2{......}

11.demo3{......}

12}

13

14

15

16

17

这样，在屏幕上的时候，就会按照screen的样式显示，而打印的时候，则会按照print的设定来打印。

二、如何设定打印尺寸

屏显的尺寸就不用多少了吧，像素是基本单位，根据情况选用em等。其实打印的时候也一样简单，使用实际的物理尺寸就可以了，常用的公制单位是厘米cm和毫米mm。以一个图片为例：

01

02

03@media screen{

04.demo1{

05width:500px;

06height:400px;

07}

08}

09@media print{

10.demo1{

11width:150mm;

12height:120mm;

13}

14}

15

16

17

18

这样在屏显的时候就会显示为500*400px，而打印的时候就会打印成15*12厘米了。如果元素比较独立，使用id和#选择器也是一样可以的。

三、打印分页

打印分页是media提供的一个非常方便的属性，它可以让你将一个页面的内容分别打印在多张纸上，而不需要你将网页也做成多个页面，这个属性就是page-break-after，在CSS中设定page-break-after的值，然后在页面中需要分页地方插入这个属性就可以了，打印时会在当前元素的尾部分页。另外还有一个page-break-before，从名字上就可以看出，和page-break-after一样是用来分页的，不同的是它的位置在对象之前。page-break-after的可用属性值含义

auto假如需要，在对象之后插入页分割符

always始终在对象之后插入页分割符

avoid避免在对象后面插入页分割符

left在对象后面插入页分割符直到它到达一个空白的左页边

right在对象后面插入页分割符直到它到达一个空白的右页边

null空值。IE5用来取消页分割符设置

使用范例：

01

02

03@media screen{

04#demo1{

05width:500px;

06height:400px;

07}

08#demo2{

09width:500px;

10height:400px;

11}

12

13}

14@media print{

15#demo1{

16width:150mm;

17height:120mm;

18page-break-after:always;

19}

20#demo2{

21width:150mm;

22height:120mm;

23}

24}

25

26

27

28

29

当然，我们也可以使用内联的代码来分页

1

2

效果是一样的。