一、如何实现屏显和打印的区别：
通常我们会如下设置CSS：
<!--内嵌式--> <style type="text/css"> .demo1{...} .demo2{...} .demo3{...} </style> <!--外联式--> <link rel="stylesheet" type="text/css" href="mycss.css">
实际上这个时候我们省略了一个叫做media属性，它是用来指定CSS的有效范围的。加上media属性的书写方法应该是这样：
<!--内嵌式--> <style type="text/css"> @media all{ .demo1{...} .demo2{...} .demo3{...} } </style> <!--外联式--> <link rel="stylesheet" type="text/css" href="mycss.css" media="all">
当然这样写和不加media属性是一样的，范围都是all，下面解释一下media其他值的意思:
| media属性的值 | 含义 |
|---|---|
| all | 用于所有设备类型 |
| aural | 用于语音和音乐合成器 |
| braille | 用于触觉反馈设备 |
| embossed | 用于凸点字符（盲文）印刷设备 |
| handheld | 用于小型或手提设备 |
| 用于打印机 | |
| projection | 用于投影图像，如幻灯片 |
| screen | 用于计算机显示器 |
| tty | 用于使用固定间距字符格的设备。如电传打字机和终端 |
| tv | 用于电视类设备 |
实际上因为规范尚未统一，并不是所有值都可以用的，不过目前可以确认的是，主流的三款浏览器内核IE、火狐和Chrome都支持了all、screen和print，对于打印来说足够了。
那么在需要区分打印和屏幕显示的页面，我们就可以这样书写CSS:
<!--内嵌式--> <style type="text/css"> @media screen{ .demo1{...} .demo2{...} .demo3{...} } @media print{ .demo1{......} .demo2{......} .demo3{......} } </style> <!--外联式--> <link rel="stylesheet" type="text/css" href="screen.css" media="screen"> <link rel="stylesheet" type="text/css" href="print.css" media="print">
这样，在屏幕上的时候，就会按照screen的样式显示，而打印的时候，则会按照print的设定来打印。
二、如何设定打印尺寸
屏显的尺寸就不用多少了吧，像素是基本单位，根据情况选用em等。其实打印的时候也一样简单，使用实际的物理尺寸就可以了，常用的公制单位是厘米cm和毫米mm。以一个图片为例：
<!--内嵌式--> <style type="text/css"> @media screen{ .demo1{ width:500px; height:400px; } } @media print{ .demo1{ width:150mm; height:120mm; } } </style> <!--body中的图片--> <img src="..." class="demo1">
这样在屏显的时候就会显示为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用来取消页分割符设置 |
使用范例：
<!--内嵌式--> <style type="text/css"> @media screen{ #demo1{ width:500px; height:400px; } #demo2{ width:500px; height:400px; } } @media print{ #demo1{ width:150mm; height:120mm; page-break-after:always; } #demo2{ width:150mm; height:120mm; } } </style> <!--body中的图片，会在同一个页面显示，但是两幅图片会分别打印在2张纸上--> <img src="..." id="demo1"> <img src="..." id="demo2">
当然，我们也可以使用内联的代码来分页
<img src="..." id="demo1" style="page-break-after:always;"> <img src="..." id="demo2">
效果是一样的。