視網膜（高DPI）的背景圖像，CSS媒體查詢

濟南網站建設只用視網膜高DPI背景圖像技術。 本周我們將告訴你如何使用高分辨率的CSS背景圖像的視網膜或高DPI顯示器工作。 這是我們相信這將真正的趨勢，開始成為標準的做法在2013年。 特別是在去年看到了一些新的高DPI設備，如MacBook Pros筆記本電腦，iPad和點燃的釋放。

在這個迷你截圖我從我的視網膜的MacBook的英國廣播公司天氣預報的網站了，你可以看到在旁邊的Retina分辨率矢量文字模糊72DPI云圖標。

正如你可能知道，視網膜屏幕通常有四個像素，你希望看到只有一個。 這意味著，定期72DPI光柵圖形的大小增加一倍，看起來模糊進出的地方。

印刷術，CSS3 SVGs和圖標字體鋪平了道路快裝，清脆的高清設計，但是最佳實踐與嵌入圖像的工作仍然是一個不斷發展的實踐。

盡管如此，一些偉大的插件已經開始出現像retina.js和WP視網膜X2 -這動態提供更高分辨率的圖像對那些與高DPI屏幕。

進入CSS3媒體查詢

好消息然而，就是與背景圖像像精靈的工作更容易的工作。 CSS3為我們帶來了媒體查詢已成為響應性的Web設計的基石。 以同樣的方式媒體查詢發現視口大小，他們也可以檢測目前所有的高DPI分辨率以下的CSS：

進入CSS3背景大小屬性

CSS3中介紹，背景大小屬性允許你指定你的背景圖片的尺寸，這將使我們能夠這樣它可以將分辨率相匹配的視網膜裝置的縮小圖像。 這可以通過以下方式來完成：

任何物業這三個用途將讓你實現的結果，但是我建議由像素指定大小，只有指定的寬度。 如果你根本就沒有指定高度，它會自動按比例添加到您指定的寬度。 所以，如果你把它放在一起，就像在我們的視頻教程，你完成的CSS代碼應該看起來像這樣：

完整的CSS標記

是否值得呢？

是的，在我看來這是絕對值得去努力。 即使你的設計在短短的幾個關鍵項目，如精靈或您網站的主要標志。 我也認為這是設備蓄著視網膜顯示屏將很可能使用支持CSS3的瀏覽器，因此媒體查詢和背景-size屬性公平的假設。

在其中一個地方產生兩個不同分辨率的圖像將需要一些額外的時間，但這樣做的結果看起來棒極了。 如果你足夠幸運，現在要瀏覽一個Retina屏幕上，檢查出這些例子在網上看到網頁設計的演變：

• 碎雜志的標志
  雖然不是通過這種技術動態提供，碎雜志的網站標志被嵌入在視網膜上的大小為所有設備，它看起來精湛的高DPI屏幕。
• 活動監視器的主頁
  活動監視器有一個可愛的，當代的主頁是完全視網膜兼容。 使用相同的媒體查詢，并在我們的例子背景尺寸組合，他們服務于一個單獨的和獨特的Retina樣式表。