웹페이지 인쇄 스타일에 CSS를 사용하는 방법은 무엇입니까?

대부분의 프런트 엔드 엔지니어가 디스플레이 화면 디자인을 담당한다고 생각합니다. 가장 일반적으로 사용되는 측정 단위는 px입니다. 그러나 때로는 "물류 배송 인쇄 주문"과 같은 인쇄 요구 사항이 불가피할 수도 있습니다. 전자 상거래 플랫폼, "인쇄 주문" 등은 모두 네티즌으로부터 인쇄해야 할 수도 있습니다. 이때 이전에 웹 페이지를 작성한다는 아이디어에 따라 인쇄할 단일 페이지를 작성하면 최종 인쇄 효과는 그다지 만족스럽지 않습니다. 주의할 점에 대해 살펴보겠습니다.

1. 말하기 전! 먼저 두 가지 개념을 이해하겠습니다. 하나는 px이고 다른 하나는 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/>

styles.css에 screen을 지정하면 styles.css에 포함된 스타일이 컴퓨터 화면에서만 사용되도록 할 수 있습니다. 마찬가지로 미디어 속성을 print로 설정하면 print.css에 포함된 스타일이 사용자가 페이지를 인쇄할 때만 사용되도록 할 수 있습니다.

특수 인쇄 스타일의 일부 최적화:

(1) 점을 사용하여 크기를 지정합니다

인쇄 스타일 시트에서는 글꼴 크기를 설정하기 위해 포인트를 사용하는 것이 매우 합리적입니다. 이 인쇄 스타일 시트에서는 먼저 "포인트" 단위를 사용하여 6c04bd5ca3fcae76e30b72ad730ca86d 태그의 기본 글꼴 크기를 정의합니다.

body {

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

font-size: 12pt;

}


픽셀 단위를 사용하는 것과 비교하면 12포인트가 얼마나 큰지 더 잘 상상할 수 있을 것입니다. 동시에 우리는 serif 글꼴도 사용합니다. 이 글꼴은 인쇄할 때 더 자세하고 읽기 쉽습니다.

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

(2) 불필요한 태그를 숨겨 잉크를 절약하세요

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

display: none;
}



인쇄 스타일 시트에서 display:none;을 설정하면 인쇄 결과에서 이러한 요소를 숨길 수 있습니다.

<br/>

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

 <br/>

위 내용은 웹페이지 인쇄 스타일에 CSS를 사용하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!