一、在說之前！我們先來理解兩個概念，一個是px,一個是pt

1、px就是表示pixel，像素，是屏幕上顯示數據的最基本的點；px是一個點，它不是自然界的長度單位,可以畫的很小，也可以很大。如果點很小，那畫面就清晰，稱它為“分辨率高”，反之，就是“分辨率低”。所以，“點”的大小是會“變”的，也稱為“相對長度”。

2、pt就是point，是印刷行業常用單位，等于1/72英寸,確切的說法是一個專用的印刷單位“磅”,以它是一個自然界標準的長度單位，也稱為“絕對長度”。

在網頁設計中，用戶的屏幕的基本單位是px，因此用px作為單位是最簡單也最容易理解的，而用pt作為單位也不過是通過了Windows的設置乘上了一個比率轉變成px再顯示。

如果使用Word和Photoshop的主要目的僅僅是為了輸出打印。使用pt就更方便，當打印到實體時，pt作為一個自然長度單位就方便實用了：比如Word中普通的文檔都用“宋體 9pt”，標題用“黑體 16pt”等等，無論電腦怎么設置，打印出來永遠就是這么大。
總結：

 px：pixel，像素，屏幕上顯示的最小單位，用于網頁設計，直觀方便；

 pt：point，是一個標準的長度單位，1pt＝1/72英寸，用于印刷業，非常簡單易用；

 em：即％，在CSS中，1em＝100％，是一個比率，結合CSS繼承關系使用，具有靈活性。

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

 PX和PT轉換的公式：

 以前在文章中介紹過PX和PT的轉換規則，pt=px乘以3/4。

 如12px×3/4=9pt大小。

 PX和em轉換的公式：

 對于PX轉em的方法也類似，就是em=16乘以px，也就是說1.5em=1.5×16=24px

二、理解了上面的概念，我們再來具體看看怎么優化網頁打印樣式：
首先，我們可以準備2套樣式，一套正常的css網頁展示的樣式，另一套專門給打印的時候用的html' target='_blank'>CSS樣式，只要用戶打印，就會通過媒體查詢自動用打印的專門樣式。這樣，既可以在瀏覽器很好展示效果，也不影響具體打印出來的效果。

//正常瀏覽器用的樣式 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 / 

其中media指定的屬性就是設備，顯示器上就是screen，打印機則是print，電視是tv，投影儀是projection。

通過為styles.css指定screen,就能確保styles.css包含的樣式只會對電腦屏幕使用,同樣的,把media屬性設為print就能確保print.css包含的樣式只在使用者打印頁面時使用.

專門打印樣式中的一些優化：

在打印樣式表里,用點數制定字體大小是件十分合理的事情.在這份打印樣式表中,首先就為 body 標簽定義基礎字體大小 -- 使用 點 單位.

body {

font-family: Times New Roman , serif;

font-size: 12pt;

}

比起用像素單位來說,這個應該更能想象12點字體會印多大,同時我們也選用serif字體,這種字體打印出來比較細致,而且比較容易閱讀.

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

display: none;

}

通過在打印樣式表里設定display:none;我們就能使打印結果隱藏掉這些元素.

（3）去掉背景圖片和顏色

body {

 background: none;

 } 

這個方法去掉其他標簽在屏幕樣式里指定的背景圖片,顏色.這樣做節省墨水,且讓打印結果更好閱讀

 三、打印樣式表注意事項：
 1、打印樣式表中最好不要用背景圖片，因為打印機不能打印CSS中的背景。如要顯示圖片，請使用html插入到頁面中。
 2、最好不要使用像素作為單位，因為打印樣式表要打印出來的會是實物，所以建議使用pt和cm。
 3、隱藏掉不必要的內容。（@print div{display:none;}）
 4、打印樣式表中最好少用浮動屬性，因為它們會消失。
 7、如果想要知道打印樣式表的效果如何，直接在瀏覽器上選擇打印預覽就可以了。        
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。