1、打印樣式css的技巧和要點淺析知識分享不經過任何處理而挺直打印網站上的頁面會得到一個不抱負的效果。我們web開發人員可以容易采納幾個要點來使之達到較為合適的效果：· 用法響應式布局設置打印的效果· 在合適的時候打印背景和色彩· 添加顯示的網址或頁面鏈接，以供參考· 用法css filter 提高打印的圖形效果針對打印的樣式，而不是屏幕顯示樣式首先，我們需要用法媒體查詢（media query）針對打印樣式設置。重新針對打印寫css樣式是沒有須要的，我們只需要針對差異設置打印的樣式籠罩掉之前的默認樣式。大多數

2、的掃瞄器會自動按照打印更改色彩，以節約打印原料，但是我們還是盡可能的手工設置一下。為了達到最佳效果，使色彩清楚明白，我們起碼需要包含一下基本的打印樣式。對于打印，大多數狀況下我們不需要打印囫圇頁面，只需要打印一個簡潔的能夠突出需要信息的頁面，那么我們將不相關的部分躲藏掉（如：導航條、背景）。在編寫打印樣式表的時候，你要注重要用法厘米或者英寸作為單位而不是屏幕像素單位，實際的單位對打印十分實用。為了保證打印樣式實用，寫css樣式使打印的內容距離紙張邊緣，看起來更好，需要用法 page 這個語法：為了保證不被跨頁打印，如一個標題和內容在頁面底部被分開：另一中狀況是要防止過寬而超出紙張邊緣：第三個要

3、點是確保 articles 文章標簽的內容，在新的一頁開頭：最后，還要注重列表和不被分開在不同的頁：盡管這些還不完善，不過這是一個良好的開頭背景和色彩對于一些網站，色彩和背景圖還是十分須要需要遵循的。假如用戶是在 webkit 內核掃瞄器上打印的話，我們可以強制打印機打印屏幕上所看到的色彩（即強制在打印頁面上浮現任何的背景圖和色彩），普通來說彩色打印機可以做到這點，我們需要一個單獨的媒體查詢：圓滿的是，這不能馬上應用于firefox opera 和ie.擴展打印樣式里的超鏈接假如挺直打印，超鏈接將只是一點文字，而不會浮現鏈接的網址，這樣來說，是沒故意義的。我們可以將url鏈接展示在打印的頁面上

4、，我們可以用法：after偽類來實現而不影響周圍的元素布局：看下面這是html:下面是顯示的效果：其中一個問題是，打印頁面上的錨文本和圖像鏈接也將擴大。我們可以很好的用css規章修復。鏈接周圍圖像是比較棘手的，抱負的狀況是圖像周圍的鏈接將有一個class。css挑選器實現將很容易：全部這些辦法都假定用戶將繼續通過手工輸入網址。 一個更好的解決計劃是通過提供匹配的qr碼的數字版本的頁面更簡單拜訪。打印鏈接二維碼使之更簡單拜訪如下圖：我們需要用法谷歌 圖形api來實現：· 我們希翼谷歌提供的圖表信息（ qr ，在我們的例子中）;· 展現大小的的qr印記，

5、以像素為單位;· url舉行編碼;· 用法的字符編碼形式。通常我們會在頁面頂部的一個標題元素關聯的url：為了制造預期的打印結果，我們將提供足夠的間距給h1用來放置二維碼，由于這個二維碼需要增強到每個頁面，我們需要增強一條css規章：這個辦法的缺點是使開發者每個元素都哀求一個api。假如你的主機是php，則可以自動生成當前頁面的url:給wordpress的樣式：用法css3 filter 提高打印的質量掃瞄器通常會打印出橫幅圖像，特殊是假如有問題的旗幟在黑暗的背景是白色的：css3的過濾器做什么，你所期望的 – 在頭圖像反色，變

6、成黑白色，反之亦然 – 但它們只能在chrome和safari。 為了彌補firefox，我們需要一種不同的辦法 – 相當于過濾器作為一個單獨的svg文件寫：從理論上講，你可以用法一個css sprite 之間舉行切換不同版本的打印的標記，但是這將意味著增強一倍的文件大小可能沒有什么益處。 相反，我建議用法css過濾器（和svg當量，為firefox）的反轉圖像之前，打印的頁面： 印刷兩種形式的標記（即α-蒙面png或純黑色背景）的結果是：總結因為打印不便利跟蹤，而且缺乏重視。在web開發中也往往被忽視，大多數時候我們只閱讀線上的網頁，而不是打印出來。 另一方面即使人們只是間或需要打印的東西從網站，這將是抱負的，假如頁面設計適合的打印機，就像現代的網站適應各種屏幕尺寸和設備。 打印的自適應設計，可用性和可拜訪性和web開發的重要組成