css设置网页打印页面.doc

一、关于网页和打印的尺寸换算 首先需要弄明白一个问题，网页的宽度单位是像素px，打印的宽度单位是毫米mm，两者之间并没有一个固定关系，而是可以自定义，他们之间的关系通常用DPI（像素每英寸）来衡量。其中每英寸大约等于25.41mm。 以前的显示器DPI大约是72，也就是屏幕上的72像素用一把尺贴着屏幕去量，大约就是25.41mm（现在屏幕的种类多了，很多高分屏的72像素会小于25.41mm很多，也就是同样面积可以显示更多像素，使图像更精细，当然也会使点对点的文字更小），这个规格沿用了很久，以至于很多人以为这个就是所有的计算机显示和实际尺寸的换算关系。 然而实际测试中发现，网页的打印DPI并不是72，而是96。通过一个简单的页面打印即可验证： hr align=left width=72 / hr align=left width=96 / 新建一个页面，画两条横线，一条72px，另一条96px，然后打印出来，用尺量一下就会发现，96px的那条线刚好25mm超出一点，72px那条大约只有19mm。 所以在可以确定得到数据： 网页的打印DPI是96； 1px打印出来的宽度大约是0.265mm； 要打印1mm大约需要3.77px。 注意！上述数值仅供概念参考，不可用于计算，否则将有很大的累加误差。实际计算的时候，请将(25.41/96)保留到最后。 关于页面设置的问题： 想必很多人都遇到过设置了0页边距，但是打印出来依旧有白边的情况。实际上这个时候再查看一下页面设置就会发现，页边距已经自动更改了。其实这个页边距是由打印机的驱动程序来决定的，因为打印机的结构等关系，不一定能够无边距打印，这个最小页边距的参数会记录在驱动程序中并发送给打印软件，控制页边距的范围。 这个页边距是从页面的最边缘计算起的，所以基本上所见即所得。以本人的HP D1368为例，设定纸张为普通A4时，最小上下左右分别是17.36mm、12.78mm、3.09mm和3.04mm。所以建议在做开发的时候，内容宽度不要企图占据整张纸宽，需要减去页边距的宽度。其中IE默认的页边距是四边均为19.05mm。可以适应绝大多数的打印机，并能容许纸张定位的少许误差。 另外页面方向需要注意下，上文中的上下左右是相对于用户来说的，对于计算机来说，并无上下左右的概念，计算机只知道四边的各自最小页边距。所以如果设置为横向打印的话，原来每边的页边距依然不会变化，而不是相对于现在的横向上下左右分别是17.36mm、12.78mm、3.09mm和3.04mm。 三、关于BODY的margin和padding 这个是很多人容易忽略的问题。本人的IE8的测试结果是： 1、不指定margin和padding，对比margin和padding指定为0的时候，打印出来的位置是一样的，尽管他们在IE8中的显示并不一样，当不指定的时候，会自动留下大约15px的白边，但是这个白边并不会计入打印尺寸； 2、如果指定了margin和padding，则会计入尺寸进行打印，并且数值可以为负值。 如果换了其他浏览器，不指定margin和padding的时候，可能会显示白边或和也可能不显示；如果显示白边的话，也不一定是15px，同时也有可能会计入或不计入打印尺寸——所以如果是用于打印的页面，一定要手动指定margin和padding，即使数值是0。 四、最终可用的宽度 所以最终在一张A4上面打印出内容，页面可用的尺寸是： (margin和padding的尺寸+内容部分的总宽度)=(210-19.05*2)*(96/25.41)=649px； 同理高度为：978px。 五、关于浏览器得打印BUG 每种浏览器对于打印都有不同的理解，这里以IE为例，在IE9中，有时会自动按比例缩小页面，此时进入页面设置界面重新设置一下，或者在打印预览界面重新调整一下比例就可以了。 比如页面设置无误，且预览本来就是100%，但是页面依旧缩小时，进入页面设置直接点确定，然后将预览比例改为50%或者其他再改回100%，就正常了。 在公制长度单位与屏幕分辨率进行换算时，必须用到一个DPI(Dot Per Inch)指标。?网页打印中，默认采用的是96dpi，并非传闻的72dpi?(数量 也就是点的数量)。 A4纸张的尺寸是210×297mm，按1英寸=25.41mm换算，即8.264×11.688英寸?所以，A4纸96dpi下的分辨率是794×1123，?但是打印机是无法满幅打印的，总要有页边距，所以我们在制作网页的时候必须减去页边距。 link type=text/css rel=stylesheet href=css/print.css media=print /*白纸黑字*/ @media print { b