使用css sprites來優化你的網站在Retina屏幕下顯示實現原理與代碼

2024-07-11 08:29:15

字體：大中小

來源：轉載

供稿：網友

特別聲明：此篇文章根據Maykel的英文文章《Using CSS Sprites to optimize your website for Retina Displays 》進行翻譯，整個譯文帶有我們自己的理解與思想，如果譯得不好或不對之處還請同行朋友指點。CSS sprites(CSS圖片精靈)已經存在很久了。事實上，八年前就有CSS Sprites的詳細介紹。CSS Sprites為一些大型的網站節約了帶寬，讓提高了用戶的加載速度和用戶體驗，不需要加載更多的圖片。

對于小型網站，CSS Sprites并沒有帶來很大的變化，或許這樣使用并不理想。但在是高分辨率的顯示屏幕下，比如說Retina屏幕下，CSS Sprites將會起來越重要。

優化高分辨的屏幕

優化高分辨率下的屏幕下效果，你需要通過“media queries”準備一張大的圖片。所以在正常分辨率下加載的是“@1x”圖像，在高分辨率下加載的是@2像素下的效果。這就意味著，你的圖片數要增加兩倍，而且CSS樣式中也需要增加兩倍。

是的，我們通過javascript可以解決，但是我們沒有找到通過代碼真正解決的方法。但是通過css sprites技術，我們只需要通過CSS的選擇器來覆蓋@1x的圖片。

接下來的例子中，我們只通地四個選擇器來控制不同的圖片資源。首先會使用Retina技術，你可以為獨立的元素使用不同的代碼。然后在非視網膜屏幕下使用200x200px的的CSS Sprites圖片。

使用css sprites來優化你的網站在Retina屏幕下顯示

復制代碼

代碼如下:
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;
}
}

上一篇：CSS3等相關屬性制作分頁導航實現代碼

下一篇：inline-block元素的4px空白間距解決方案

發表評論

共有條評論