Comment utiliser CSS pour le style d'impression des pages Web ?

Je crois que la plupart des ingénieurs front-end s'occupent de la conception de l'écran d'affichage. L'unité de mesure la plus couramment utilisée est le px. Mais parfois, nous aurons inévitablement des besoins d'impression, comme « l'impression de distribution logistique » sur un e. -plateforme de commerce. "Commande", "Commande d'impression", etc. peuvent tous devoir être imprimés par les internautes. À ce stade, si vous rédigez toujours la page de commande d'impression selon l'idée d'écrire des pages Web auparavant, le l'effet imprimé final ne sera pas très satisfaisant. Voyons à quoi il faut prêter attention.

1. Avant de parler ! Comprenons d'abord deux concepts, l'un est px, l'autre est 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。

En spécifiant screen pour styles.css, vous pouvez vous assurer que les styles inclus dans styles.css ne s'appliqueront qu'à l'écran de l'ordinateur. De la même manière, définir l'attribut media sur print garantit que les styles contenus dans print.css ne sont utilisés que lorsque l'utilisateur imprime la page

Quelques optimisations dans les styles d'impression spécialisés :

<🎜. >( 1) Utilisez des points pour spécifier la taille

Dans une feuille de style d'impression, il est très raisonnable d'utiliser des points pour spécifier la taille de la police. Dans cette feuille de style d'impression, définissez d'abord la taille de police de base pour le <. ;body> tag -- Utilisez les unités "point".

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

Par rapport à l'utilisation d'unités de pixels, cela devrait être préférable d'imaginer la taille de la police de 12 points qui sera imprimée en même temps, nous utilisons également des polices serif. Cette police peut être imprimée et comparée détaillée et plus facile à lire.

<br/>

(2) Masquez les balises inutiles pour économiser de l'encre

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

En définissant display:none; dans la feuille de style d'impression, nous pouvons faire en sorte que le résultat de l'impression cache ces éléments.

（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/>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!