濟南網(wǎng)站建設只用視網(wǎng)膜高DPI背景圖像技術(shù)。 本周我們將告訴你如何使用高分辨率的CSS背景圖像的視網(wǎng)膜或高DPI顯示器工作。 這是我們相信這將真正的趨勢，開始成為標準的做法在2013年。 特別是在去年看到了一些新的高DPI設備，如MacBook Pros筆記本電腦，iPad和點燃的釋放。
在這個迷你截圖我從我的視網(wǎng)膜的MacBook的英國廣播公司天氣預報的網(wǎng)站了，你可以看到在旁邊的Retina分辨率矢量文字模糊72DPI云圖標。
正如你可能知道，視網(wǎng)膜屏幕通常有四個像素，你希望看到只有一個。 這意味著，定期72DPI光柵圖形的大小增加一倍，看起來模糊進出的地方。
印刷術(shù)，CSS3 SVGs和圖標字體鋪平了道路快裝，清脆的高清設計，但是最佳實踐與嵌入圖像的工作仍然是一個不斷發(fā)展的實踐。
盡管如此，一些偉大的插件已經(jīng)開始出現(xiàn)像retina.js和WP視網(wǎng)膜X2 -這動態(tài)提供更高分辨率的圖像對那些與高DPI屏幕。
進入CSS3媒體查詢
好消息然而，就是與背景圖像像精靈的工作更容易的工作。 CSS3為我們帶來了媒體查詢已成為響應性的Web設計的基石。 以同樣的方式媒體查詢發(fā)現(xiàn)視口大小，他們也可以檢測目前所有的高DPI分辨率以下的CSS：
|
01
02
03
04
05
06
07
08
09
10
|
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 2) { /* Add your Retina Image Replacement Classes here. */ } |
進入CSS3背景大小屬性
CSS3中介紹，背景大小屬性允許你指定你的背景圖片的尺寸，這將使我們能夠這樣它可以將分辨率相匹配的視網(wǎng)膜裝置的縮小圖像。 這可以通過以下方式來完成：
|
1
2
3
|
background-size: 500px 200px; /* You can specify exact dimensions (width, height) */background-size: 25% auto; /* You can specify dimensions by percentage relative to the container (width, height) */background-size: cover; /* The cover value will automatically fill the area of the container the style is applied to */ |
任何物業(yè)這三個用途將讓你實現(xiàn)的結(jié)果，但是我建議由像素指定大小，只有指定的寬度。 如果你根本就沒有指定高度，它會自動按比例添加到您指定的寬度。 所以，如果你把它放在一起，就像在我們的視頻教程，你完成的CSS代碼應該看起來像這樣：
完整的CSS標記
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
|
div.logo { margin:0 auto; border:1px solid #666; width:400px; height:215px; background:url(james-n-nick.jpg) no-repeat; }@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 2) { div.logo { background:url(james-n-nick@2x.jpg) no-repeat; background-size: 400px; } } |
是否值得呢？
是的，在我看來這是絕對值得去努力。 即使你的設計在短短的幾個關(guān)鍵項目，如精靈或您網(wǎng)站的主要標志。 我也認為這是設備蓄著視網(wǎng)膜顯示屏將很可能使用支持CSS3的瀏覽器，因此媒體查詢和背景-size屬性公平的假設。
在其中一個地方產(chǎn)生兩個不同分辨率的圖像將需要一些額外的時間，但這樣做的結(jié)果看起來棒極了。 如果你足夠幸運，現(xiàn)在要瀏覽一個Retina屏幕上，檢查出這些例子在網(wǎng)上看到網(wǎng)頁設計的演變：
- 碎雜志的標志
雖然不是通過這種技術(shù)動態(tài)提供，碎雜志的網(wǎng)站標志被嵌入在視網(wǎng)膜上的大小為所有設備，它看起來精湛的高DPI屏幕。 - 活動監(jiān)視器的主頁
活動監(jiān)視器有一個可愛的，當代的主頁是完全視網(wǎng)膜兼容。 使用相同的媒體查詢，并在我們的例子背景尺寸組合，他們服務于一個單獨的和獨特的Retina樣式表。
