Wie verwende ich CSS für den Druckstil einer Webseite?

Ich glaube, dass die meisten Front-End-Ingenieure sich mit dem Design des Bildschirms befassen. Die am häufigsten verwendete Maßeinheit ist jedoch px, aber manchmal haben wir zwangsläufig Druckanforderungen, wie zum Beispiel „Logistik-Verteilungsdruck“. -Commerce-Plattform. „Bestellung“, „Druckbestellung“ usw. müssen möglicherweise alle von Internetnutzern ausgedruckt werden. Wenn Sie die Druckauftragsseite zu diesem Zeitpunkt immer noch so schreiben, wie Sie es beim Schreiben von Webseiten getan haben, ist dies der Fall Der Druckeffekt wird nicht sehr zufriedenstellend sein. Werfen wir einen Blick darauf, worauf Sie achten sollten.

1. Lassen Sie uns zunächst zwei Konzepte verstehen, eines ist px, das andere ist 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。

Durch die Angabe des Bildschirms für „styles.css“ können Sie sicherstellen, dass die in „styles.css“ enthaltenen Stile nur für gelten Auf ähnliche Weise wird durch die Einstellung des Medienattributs auf Drucken sichergestellt, dass die in print.css enthaltenen Stile nur verwendet werden, wenn der Benutzer die Seite druckt:

( 1) Verwenden Sie Punkte, um die Größe anzugeben

In einem Druck-Stylesheet ist es sehr sinnvoll, Punkte zu verwenden, um die Schriftgröße anzugeben. Definieren Sie in diesem Druck-Stylesheet zunächst die grundlegende Schriftgröße für < ;body>-Tag – Verwenden Sie „Punkt“-Einheiten.

body {

Schriftfamilie: „Times New Roman“, Serif;

Schriftgröße: 12pt;

}

Im Vergleich zur Verwendung von Pixeleinheiten sollte dies besser sein, um sich vorzustellen, wie groß die 12-Punkt-Schriftart gleichzeitig gedruckt wird. Wir verwenden auch Serifenschriften. Diese Schriftart kann detailliert gedruckt und besser gelesen werden.

(2) Unnötige Tags ausblenden, um Tinte zu sparen

<br/>

#nav, #sidebar, #advertising, #search {

display: none;

}

Durch Einstellung display:none; Im Druck-Stylesheet können wir dafür sorgen, dass das Druckergebnis diese Elemente ausblendet.

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

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

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

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

Das obige ist der detaillierte Inhalt vonWie verwende ich CSS für den Druckstil einer Webseite?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!