不經(jīng)過任何處理而直接打印網(wǎng)站上的頁面會(huì)得到一個(gè)不理想的效果。我們WEB開發(fā)人員可以簡(jiǎn)單的采用幾個(gè)要點(diǎn)來使之達(dá)到較為合適的效果：

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

?

針對(duì)打印的樣式，而不是屏幕顯示樣式

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

        @media print {

}
      

?

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

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

?

對(duì)于打印，大多數(shù)情況下我們不需要打印整個(gè)頁面，只需要打印一個(gè)簡(jiǎn)潔的能夠突出需要信息的頁面，那么我們將不相關(guān)的部分隱藏掉（如：導(dǎo)航條、背景圖片）。

        /* Default styles */

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

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

   nav, aside {
      display: none;
   }
}
      

?

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

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

   nav, aside {
      display: none;
   }

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

   @page {
      margin: 2cm;
   }
}
      

?

為了保證不被跨頁打印，如一個(gè)標(biāo)題和內(nèi)容在頁面底部被分開：

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

?

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

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

?

第三個(gè)要點(diǎn)是確保 articles 文章標(biāo)簽的內(nèi)容，在新的一頁開始：

        article {
   page-break-before: always;
}
      

?

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

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

?

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

?

背景圖片和顏色

對(duì)于一些網(wǎng)站，顏色和背景圖還是非常必要需要遵循的。如果用戶是在 webkit 內(nèi)核瀏覽器上打印的話，我們可以強(qiáng)制打印機(jī)打印屏幕上所看到的顏色（即強(qiáng)制在打印頁面上出現(xiàn)任何的背景圖和顏色），一般來說彩色打印機(jī)可以做到這點(diǎn)，我們需要一個(gè)單獨(dú)的媒體查詢：

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

?

遺憾的是，這不能馬上應(yīng)用于firefox opera 和IE.

?

擴(kuò)展打印樣式里的超鏈接

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

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

?

下面是顯示的效果：

?

其中一個(gè)問題是，打印頁面上的錨文本和圖像鏈接也將擴(kuò)大。我們可以很好的用CSS規(guī)則修復(fù)

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

?

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

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

?

CSS4選擇器實(shí)現(xiàn)將很簡(jiǎn)單：

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

?

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

?

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

如下圖： 我們需要使用谷歌 圖形API來實(shí)現(xiàn)：

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

通常我們會(huì)在頁面頂部的一個(gè)標(biāo)題元素關(guān)聯(lián)的URL：

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

?

為了創(chuàng)造預(yù)期的打印結(jié)果，我們將提供足夠的間距給H1用來放置二維碼。因?yàn)檫@個(gè)二維碼需要增加到每個(gè)頁面。我們需要增加一條CSS規(guī)則：

        @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;
   }
}
      

?

這個(gè)方法的缺點(diǎn)是使開發(fā)者每個(gè)元素都請(qǐng)求一個(gè)API。如果你的主機(jī)是PHP，則可以自動(dòng)生成當(dāng)前頁面的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 提高打印的質(zhì)量

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

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

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

?

CSS3的過濾器做什么，你所期望的 – 在頭圖像反色，變成黑白色，反之亦然 – 但它們只能在Chrome和Safari。?為了彌補(bǔ)Firefox，我們需要一種不同的方法 – 相當(dāng)于過濾器作為一個(gè)單獨(dú)的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>
      

?

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

?

總結(jié)

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

?

轉(zhuǎn)載： cocss ? 打印樣式CSS的技巧和要點(diǎn)