Web ページの印刷スタイルに CSS を使用するにはどうすればよいですか?

ほとんどのフロントエンドエンジニアは表示画面のデザインを担当していると思いますが、最も一般的に使用される測定単位は px ですが、場合によっては、印刷のニーズが必然的に発生します。電子商取引プラットフォーム、「印刷注文」などはすべて、以前に Web ページを作成するという考えに従って印刷するページを作成する場合、ネチズンからすべて印刷する必要がある場合があります。最終的な印刷効果はあまり満足のいくものではありません。どのような点に注意すればよいのか見ていきましょう。

1. 話す前に！まず 2 つの概念を理解しましょう。1 つは px で、もう 1 つは 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/>

rree

styles.css に screen を指定することで、styles.css に含まれるスタイルがコンピューターの画面でのみ使用されるようにすることができます。同様に、メディア属性を print に設定すると、print.css に含まれるスタイルがユーザーがページを印刷するときにのみ使用されるようになります。

特別な印刷スタイルでのいくつかの最適化:

(1) サイズを指定するためにドットを使用します

。

印刷スタイル シート ここでは、フォント サイズを設定するためにポイントを使用するのが非常に合理的です。まず、6c04bd5ca3fcae76e30b72ad730ca86d タグの基本フォント サイズを

を使用して定義します。
body {

font-family: "Times New Roman", serif;

font-size: 12pt;

}

ピクセル単位を使用する場合と比較して、12 ポイントがどのくらい大きいかをよりよく想像できるはずです。同時にセリフフォントも使用します。このフォントは印刷するとより詳細で読みやすくなります。

//正常浏览器用的样式
<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" />

(2) インクを節約するために不要なタグを非表示にします

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

display: none;

}

印刷スタイルシートで display:none; を設定すると、印刷結果でこれらの要素を非表示にすることができます。

以上がWeb ページの印刷スタイルに CSS を使用するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。