How to use CSS for web page printing style?

I believe that most front-end engineers deal with the design of the display screen. The most commonly used unit of measurement is px. But sometimes, we will inevitably have printing needs, such as "logistics distribution printing" of an e-commerce platform. "Order", "Print order", etc. may all need to be printed out from netizens. At this time, if you still write the print order page according to the idea of ​​writing web pages before, the final printed effect will not be very satisfactory. Let’s take a look at what to pay attention to.

# 1. Before talking! Let's first understand two concepts, one is px, the other is pt

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

<span style="font-size: 14px">2、<span style="color: #ff0000"><strong>pt</strong></span>就是point，是印刷行业常用单位，等于1/72英寸,确切的说法是一个专用的印刷单位“磅”,以它是一个自然界标准的长度单位，也称为“<span style="color: #ff0000">绝对长度</span>”。<br/><br/></span>

<span style="font-size: 14px">在网页设计中，用户的屏幕的基本单位是px，因此用px作为单位是最简单也最容易理解的，而用pt作为单位也不过是通过了Windows的设置乘上了一个比率转变成px再显示。<br/></span>

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

<span style="font-size: 14px">　px：pixel，像素，屏幕上显示的最小单位，用于网页设计，直观方便；<br/></span>

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

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

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

<br/>

　PX和PT转换的公式：

  以前在文章中介绍过PX和PT的转换规则，pt=px乘以3/4。<br/><br/>  如12px×3/4=9pt大小。<br/><br/>  PX和em转换的公式：<br/><br/>  对于PX转em的方法也类似，就是em=16乘以px，也就是说1.5em=1.5×16=24px<br/><br/>

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

//正常浏览器用的样式
<link rel="stylesheet" type="text/css" media="screen" href="/css/styles.css?1.1.10" />
//专门打印用的样式
<link rel="stylesheet" type="text/css" media="print" href="/css/print.css?1.1.10" />

<br/>

其中media指定的属性就是设备，显示器上就是screen，打印机则是print，电视是tv，投影仪是projection。

By specifying screen for styles.css, you can ensure styles.css The included styles will only be used on the computer screen. Similarly, setting the media attribute to print will ensure that the styles included in print.css are only used when the user prints the page.

Some optimizations in special print styles ：

(1) Use dots to specify the size

In the print style sheet, it is very reasonable to use dots to specify the font size. In this print style sheet, first of all, < The ;body> tag defines the base font size -- using "point" units.

<br/>body {<br/><br/> font-family: "Times New Roman", serif;<br/><br/> font-size: 12pt;<br/><br/> }

Compared with using pixel units, this should be better to imagine how big the 12-point font will be printed. At the same time, we also choose serif font, this font is more detailed when printed and easier to read.

<br/>

(2) Hide unnecessary tags to save ink

nav, #sidebar, #advertising, #search {<br/><br/> display: none;<br/><br/> }<br/>

By setting display:none; in the print style sheet We can hide these elements in the printing result.

（3）去掉背景图片和颜色<br/>

body {<br/><br/>  background: none;<br/><br/>  } 

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

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

 <br/>

 <br/>

The above is the detailed content of How to use CSS for web page printing style?. For more information, please follow other related articles on the PHP Chinese website!