使用css sprites來優(yōu)化你的網(wǎng)站在Retina屏幕下顯示實(shí)現(xiàn)原理與代碼
我要評論特別聲明：此篇文章根據(jù)Maykel的英文文章《Using CSS Sprites to optimize your website for Retina Displays 》進(jìn)行翻譯，整個譯文帶有我們自己的理解與思想，如果譯得不好或不對之處還請同行朋友指點(diǎn)。CSS sprites(CSS圖片精靈)已經(jīng)存在很久了。事實(shí)上，八年前就有CSS Sprites的詳細(xì)介紹。CSS Sprites為一些大型的網(wǎng)站節(jié)約了帶寬，讓提高了用戶的加載速度和用戶體驗(yàn)，不需要加載更多的圖片。
對于小型網(wǎng)站，CSS Sprites并沒有帶來很大的變化，或許這樣使用并不理想。但在是高分辨率的顯示屏幕下，比如說Retina屏幕下，CSS Sprites將會起來越重要。
優(yōu)化高分辨的屏幕優(yōu)化高分辨率下的屏幕下效果，你需要通過“media queries”準(zhǔn)備一張大的圖片。所以在正常分辨率下加載的是“@1x”圖像，在高分辨率下加載的是@2像素下的效果。這就意味著，你的圖片數(shù)要增加兩倍，而且CSS樣式中也需要增加兩倍。
是的，我們通過javascript可以解決，但是我們沒有找到通過代碼真正解決的方法。但是通過css sprites技術(shù)，我們只需要通過CSS的選擇器來覆蓋@1x的圖片。
接下來的例子中，我們只通地四個選擇器來控制不同的圖片資源。首先會使用Retina技術(shù)，你可以為獨(dú)立的元素使用不同的代碼。然后在非視網(wǎng)膜屏幕下使用200x200px的的CSS Sprites圖片。
span.location {
background: url(location.png) no-repeat 0 0;
}
span.success {
background: url(success.png) no-repeat 0 0;
}
a.delete {
background: url(delete.png) no-repeat 0 -100px;
}
.content a.fav-link {
background: url(favorite.png) no-repeat 0 0;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {
span.location {
background-image: url(location@2x.png);
background-size: 16px 14px;
}
span.success {
background-image: url(success@2x.png);
background-size: 13px 14px;
}
a.delete {
background: url(delete@2x.png) no-repeat 0 -100px;
}
.content a.fav-link {
background-image: url(favorite@2x.png);
background-size: 11px 13px;
}
}
span.location {
background: url(sprite.png) no-repeat 0 0;
}
span.success {
background: url(sprite.png) no-repeat -100px 0;
}
a.delete {
background: url(sprite.png) no-repeat -100px -100px;
}
.content a.fav-link {
background: url(sprite.png) no-repeat 0 -100px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {
span.location,
span.success,
a.delete,
.content a.fav-link {
/* Reference the @2x Sprite */
background-image: url(sprite@2x.png);
/* Translate the @2x sprite's dimensions back to 1x */
background-size: 200px 200px;
}
}
注：記住上面的這個例子僅適用于Retina屏幕下的設(shè)備，目前僅在IOS的移動設(shè)備iPhone4s、iPhone5、iPad、iPod和Mackbook Pro。對于Android系統(tǒng)下,要取決于你的系統(tǒng)，采用不同的“min-device-pixel-ratio”。
- 不應(yīng)該將所有的資源引入一個文件中，應(yīng)該使用CSS sprite 來集成圖片。創(chuàng)建@2x的sprites圖，這個圖剛好是普通圖的兩倍，而且具有雙向擴(kuò)展在Retina屏幕下，對應(yīng)的元素上使用相同的Scripts圖片使用background-size屬性來確保你的@2x Sprites圖正確定位
注意，這只是一個簡單的例子，里面對三個元素設(shè)置了背景圖，你可以根據(jù)需要在你的站點(diǎn)上使用更多的圖片，按這種方式。在Retina屏幕下，使用這種方法，不僅節(jié)約了http的請求，還讓你的代碼簡潔易于維護(hù)，同時在Retina下也更高效。
譯者手語：初次翻譯前端技術(shù)博文，整個翻譯依照原文線路進(jìn)行，并在翻譯過程略加了個人對技術(shù)的理解。如果翻譯有不對之處，還煩請同行朋友指點(diǎn)。謝謝！
相關(guān)文章
- 眾所周知,SEO優(yōu)化很重要的一點(diǎn)就是布局,而DIV+CSS布局優(yōu)于TABLE,接下來為大家簡單介紹一下CSS代碼寫法優(yōu)化，對css代碼優(yōu)化相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧2015-12-02
- 在div+css布局中，一般都這樣來整體構(gòu)架的： [code] <div id="header"></div> <div id="center"></div> <div id=&quo2009-07-11
- 網(wǎng)頁制作Webjx文章簡介：整理和優(yōu)化代碼不僅是為了你的CSS文件大小，還包括了維護(hù)性和可讀性。以上的原理并不只是針對CSS，它們還能應(yīng)用到HTML，Javascript以及其他編程語2009-04-02
- 在CSS建站中，無論其代碼長度還是文件大小都會影響到網(wǎng)頁的正確展示盒速度。那么如何來進(jìn)行CSS的優(yōu)化和驗(yàn)證呢？如果你的css水平不能夠達(dá)到自檢的程度，那么今天就和筆者一2014-10-11
CSS代碼是否合理？是否優(yōu)化？-CSS教程-網(wǎng)頁制作-網(wǎng)頁教學(xué)網(wǎng)
發(fā)現(xiàn)很多朋友對 CSS 的優(yōu)先權(quán)不甚了解，規(guī)則很簡單。需要說明的一點(diǎn)，如果你的樣式管理需要深層判斷 CSS 的優(yōu)先權(quán)，更應(yīng)反思自己的 CSS 代碼，是否合理？是否優(yōu)化？ CSS2008-10-17詳解CSS代碼重構(gòu)與優(yōu)化之路(經(jīng)典)
這篇文章主要介紹了詳解CSS代碼重構(gòu)與優(yōu)化之路(經(jīng)典) 的相關(guān)資料,需要的朋友可以參考下2016-01-07