不經過任何處理而直接打印網站上的頁面會得到一個不理想的效果。我們WEB開發人員可以簡單的采用幾個要點來使之達到較為合適的效果：

• 使用響應式布局設置打印的效果
• 打印背景圖片和顏色，在合適的時候
• 添加顯示的網址或頁面鏈接，以供參考
• 使用css filter 提高打印的圖形效果

?

針對打印的樣式，而不是屏幕顯示樣式

首先，我們需要使用媒體查詢（media query）針對 打印樣式設置。

        @media print {

}
      

?

重新針對打印寫CSS樣式是沒有必要的，我們只需要針對差異設置打印的樣式覆蓋掉之前的默認樣式。大多數的瀏覽器會自動根據打印更改顏色，以節省打印原料，但是我們還是盡可能的手工設置一下。為了達到最佳效果，使顏色清晰明了。我們至少需要包含一下基本的打印樣式。

        @media print { body { color: #000; background: #fff; } }
      

?

對于打印，大多數情況下我們不需要打印整個頁面，只需要打印一個簡潔的能夠突出需要信息的頁面，那么我們將不相關的部分隱藏掉（如：導航條、背景圖片）。

        /* Default styles */

h1 {
   color: #fff;
   background: url(banner.jpg);
}

@media print {
   h1 {
      color: #000;
      background: none;
   }

   nav, aside {
      display: none;
   }
}
      

?

在編寫打印樣式表的時候，你要注意要使用厘米或者英寸作為單位而不是屏幕像素單位，實際的單位對打印非常有用。為了保證打印樣式有用，寫CSS樣式使打印的內容距離紙張邊緣，看起來更好，需要使用 @page 這個語法：

        @media print {
   h1 {
      color: #000;
      background: none;
   }

   nav, aside {
      display: none;
   }

   body, article {
      width: 100%;
      margin: 0;
      padding: 0;
   }

   @page {
      margin: 2cm;
   }
}
      

?

為了保證不被跨頁打印，如一個標題和內容在頁面底部被分開：

        h2, h3 { page-break-after: avoid; }
      

?

另一中情況是要防止圖片過寬而超出紙張邊緣：

        img {
   max-width: 100% !important;
}
      

?

第三個要點是確保 articles 文章標簽的內容，在新的一頁開始：

        article {
   page-break-before: always;
}
      

?

最后，還要注意列表和圖片不被分開在不同的頁：

        ul, img {
   page-break-inside: avoid;
}
      

?

盡管這些還不完美，不過這是一個良好的開始

?

背景圖片和顏色

對于一些網站，顏色和背景圖還是非常必要需要遵循的。如果用戶是在 webkit 內核瀏覽器上打印的話，我們可以強制打印機打印屏幕上所看到的顏色（即強制在打印頁面上出現任何的背景圖和顏色），一般來說彩色打印機可以做到這點，我們需要一個單獨的媒體查詢：

        @media print and (color) {
   * {
      -webkit-print-color-adjust: exact;
      print-color-adjust: exact;
   }
}
      

?

遺憾的是，這不能馬上應用于firefox opera 和IE.

?

擴展打印樣式里的超鏈接

如果直接打印，超鏈接將只是一點文字，而不會出現鏈接的網址，這樣來說，是沒有意義的。我們可以將url鏈接展示在打印的頁面上，我們可以使用:after偽類來實現而不影響周圍的元素布局：

        @media print {
   article a {
      font-weight: bolder;
      text-decoration: none;
   }

   article a[href^=http]:after {
      content:" <" attr(href) "> ";
   }
}
      

?

看下面這是HTML:

        <p>You’ve explored this <a href="/blog">website</a>; now it’s time to <a >read other Web development documentation</a>.</p>
      

?

下面是顯示的效果：

?

其中一個問題是，打印頁面上的錨文本和圖像鏈接也將擴大。我們可以很好的用CSS規則修復

        article a[href^="#"]:after {
   content: "";
}
      

?

鏈接周圍圖像是比較麻煩的，理想的情況是圖像周圍的鏈接將有一個class.

        $a:after > img {
   content: "";
}
      

?

CSS4選擇器實現將很簡單：

        a:not(:local-link):after {
   content:" <" attr(href) "> ";
}
      

?

所有這些方法都假定用戶將繼續通過手工輸入網址。 一個更好的解決方案是通過提供匹配的QR碼的數字版本的頁面更容易訪問。

?

打印鏈接二維碼使之更容易訪問

如下圖： 我們需要使用谷歌 圖形API來實現：

• 我們希望谷歌提供的圖表信息（? qr ?，在我們的例子中）;
• 呈現大小的的QR印記，以像素為單位;
• URL進行編碼;
• 使用的字符編碼形式。

通常我們會在頁面頂部的一個標題元素關聯的URL：

        <header>
<h1>Lizabeth’s Salon</h1>
<h2>Providing Intellectual Stimulation Online Since 2001</h1>
</header>
      

?

為了創造預期的打印結果，我們將提供足夠的間距給H1用來放置二維碼。因為這個二維碼需要增加到每個頁面。我們需要增加一條CSS規則：

        @media print {
   header h1:after {
      content: url(https://chart.googleapis.com/chart?cht=qr&chs=150x150&chl=http://yourdomain.com&choe=UTF-8);
      position: absolute;
      right: 0;
      top: 0;
   }
}
      

?

這個方法的缺點是使開發者每個元素都請求一個API。如果你的主機是PHP，則可以自動生成當前頁面的URL:

        @media print {
   h1:after {
      content: url(https://chart.googleapis.com/chart?cht=qr&chs=150x150
&chl=http://<?=$_SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"];?>
&choe=UTF-8);
      position: absolute;
      right: 0;
      top: 0;
   }
}
      

?

給wordpress的樣式：

        @media print {
   h1:after {
      content: url(https://chart.googleapis.com/chart?cht=qr&chs=150x150
&chl=http://<?phpthe_permalink();?>&choe=UTF-8);
      position: absolute;
      right: 0;
      top: 0;
   }
}
      

?

使用CSS3 Filter 提高打印的質量

瀏覽器通常會打印出橫幅圖像，特別是如果有問題的旗幟在黑暗的背景是白色的：

        @media print {
   header {
      background: none;
      color: #000;
   }

   header img {
      filter: url(inverse.svg#negative);
      -webkit-filter: invert(100%);
      filter: invert(100%);
   }
}
      

?

CSS3的過濾器做什么，你所期望的 – 在頭圖像反色，變成黑白色，反之亦然 – 但它們只能在Chrome和Safari。?為了彌補Firefox，我們需要一種不同的方法 – 相當于過濾器作為一個單獨的SVG文件寫：

        <svg xmlns="http://www.w3.org/2000/svg">
<filter id="negative">
<feColorMatrix values="-1 0 0 0 1
0 -1 0 0 1
0 0 -1 0 1
0 0 0 1 0" />
</filter>
</svg>
      

?

從理論上講，你可以使用一個CSS sprite 之間進行切換不同版本的打印的標志，但是這將意味著增加一倍的文件大小可能沒有什么好處。?相反，我建議使用CSS過濾器（和SVG當量，為 Firefox）的反轉圖像之前，打印的頁面： 印刷兩種形式的標志（即α-蒙面PNG或純黑色背景）的結果是：

?

總結

由于打印不方便跟蹤，而且缺乏重視。在WEB開發中也往往被忽略，大多數時候我們只閱讀線上的網頁，而不是打印出來。 另一方面即使人們只是偶爾需要打印的東西從網站，這將是理想的，如果頁面設計適合的打印機，就像現代的網站適應各種屏幕尺寸和設備。?打印的自適應設計， 可用性和可訪問性和Web開發的重要組成部分，同樣應考慮的另一個方面。 處理打印自適應設計的另一個方面，我們實現更多的網站用戶的需求-并在同一時間，節省墨水，紙張和其他資源，所有這些都是重要的方面 可持續發展 的 設計 ?。

?

轉載： cocss ? 打印樣式CSS的技巧和要點