相信大多數的前端工程師都是處理顯示屏上面的設計，用到最多的計量單位就是px,但是有些時候，我們難免也會有打印的需求，比如一個電商平台的“物流配送打印單”，“打印訂單”等等可能都是需要從網友上打印出來的，這個時候如果還是按照自己以前寫網頁的思路寫打印單頁面，最后打印出來的效果會不是很理想。下面我們就來看看有什么注意的事項。
一、在說之前！我們先來理解兩個概念，一個是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網頁展示的樣式，另一套專門給打印的時候用的CSS樣式，只要用戶打印，就會通過媒體查詢自動用打印的專門樣式。這樣，既可以在瀏覽器很好展示效果，也不影響具體打印出來的效果。
//正常瀏覽器用的樣式
<link rel="stylesheet" type="text/css" media="screen" href="/css/styles.css" />
//專門打印用的樣式
<link rel="stylesheet" type="text/css" media="print" href="/css/print.css" />
其中media指定的屬性就是設備，顯示器上就是screen，打印機則是print，電視是tv，投影儀是projection。
通過為styles.css指定screen,就能確保styles.css包含的樣式只會對電腦屏幕使用,同樣的,把media屬性設為print就能確保print.css包含的樣式只在使用者打印頁面時使用.
專門打印樣式中的一些優化：
（1）用點數指定大小
在打印樣式表里,用點數制定字體大小是件十分合理的事情.在這份打印樣式表中,首先就為<body>標簽定義基礎字體大小 -- 使用"點"單位.
body {
font-family: "Times New Roman", serif;
font-size: 12pt;
}
比起用像素單位來說,這個應該更能想象12點字體會印多大,同時我們也選用serif字體,這種字體打印出來比較細致,而且比較容易閱讀.
（2）用毫米(mm)寫寬高
這時候，我們寫類似width,height,margin的時候就不能用PX了，要用mm,(因此必須要設計師設計一份以photoshop中以點為單位的效果圖，然后切圖的時候就是有多寬就對應HTML中多少毫米)
（3）隱藏不必要的標簽節省墨水
#nav, #sidebar, #advertising, #search {
display: none;
}
通過在打印樣式表里設定display:none;我們就能使打印結果隱藏掉這些元素.
（4）去掉背景圖片和顏色
body {
background: none;
}
這個方法去掉其他標簽在屏幕樣式里指定的背景圖片,顏色.這樣做節省墨水,且讓打印結果更好閱讀
三、打印樣式表注意事項：
1、打印樣式表中最好不要用背景圖片，因為打印機不能打印CSS中的背景。如要顯示圖片，請使用html插入到頁面中。
2、最好不要使用像素作為單位，因為打印樣式表要打印出來的會是實物，所以建議使用pt和cm。
3、隱藏掉不必要的內容。（@print div{display:none;}）
4、打印樣式表中最好少用浮動屬性，因為它們會消失。
7、如果想要知道打印樣式表的效果如何，直接在瀏覽器上選擇打印預覽就可以了。
歡迎加入大前端交流群！群號：277942610，VIP新群