特別聲明：此篇文章根據(jù)Maykel的英文文章《Using CSS Sprites to optimize your website for Retina Displays 》進行翻譯，整個譯文帶有我們自己的理解與思想，如果譯得不好或不對之處還請同行朋友指點。CSS sprites(CSS圖片精靈)已經(jīng)存在很久了。事實上，八年前就有CSS Sprites的詳細介紹。CSS Sprites為一些大型的網(wǎng)站節(jié)約了帶寬，讓提高了用戶的加載速度和用戶體驗，不需要加載更多的圖片。
對于小型網(wǎng)站，CSS Sprites并沒有帶來很大的變化，或許這樣使用并不理想。但在是高分辨率的顯示屏幕下，比如說Retina屏幕下，CSS Sprites將會起來越重要。
優(yōu)化高分辨的屏幕優(yōu)化高分辨率下的屏幕下效果，你需要通過“media queries”準備一張大的圖片。所以在正常分辨率下加載的是“@1x”圖像，在高分辨率下加載的是@2像素下的效果。這就意味著，你的圖片數(shù)要增加兩倍，而且CSS樣式中也需要增加兩倍。
是的，我們通過javascript可以解決，但是我們沒有找到通過代碼真正解決的方法。但是通過css sprites技術，我們只需要通過CSS的選擇器來覆蓋@1x的圖片。
接下來的例子中，我們只通地四個選擇器來控制不同的圖片資源。首先會使用Retina技術，你可以為獨立的元素使用不同的代碼。然后在非視網(wǎng)膜屏幕下使用200x200px的的CSS Sprites圖片。
復制代碼
學習交流
熱門圖片
猜你喜歡的新聞
新聞熱點
疑難解答
