自適應頁面你肯定聽說過，雪碧圖想必你也聽說過，不過在自適應頁面中使用雪碧圖應用的場景卻不多，因為很多場景里自適應頁面(移動端頁面)的小圖標啥的基本都做成字體圖標了，操作起來也比較方便，不過有時候合成字體圖標的時候也比較麻煩，AI制作復雜svg矢量圖標很麻煩，今天說的這個應用場景用的就是這個情況；
首先你要知道什么是雪碧圖，不知道的先科普之，百毒傳送門；
上面說到有的場景添加字體圖標很麻煩，如果不理解看下圖就明白了：
沒錯，就是這個國旗，有幾十個國家的，這要搞成svg矢量圖那要累死了(如果有大神有快速牛逼的解決方案請告訴我)，網上下載的也不盡全面，當然還有種方案是做成單個圖片，src引用，不過這個圖片有點多，對於移動端http回話太多了，參考前端優化的原則不想用這種方法，所以想到pc上經常用的雪碧圖的處理方式，也就是background:url(..flag.png) no-repeat，加上各個國旗的position值就可以了，問題是當頁面處於不同尺寸下時，雪碧圖一直是初始大小，無法隨着自適應尺寸變化，導致該出現國旗的區域在每個尺寸下顯示的不同，問題的核心就是控制雪碧圖顯示尺寸隨着自適應尺寸變化；
頁面部分html如下：
其中.currency定義雪碧圖，定義寬和高，gdp等部分是各個國旗的positiion，具體css如下：
.currency_icon { background: url(../images/nationalflag.png) no-repeat; background-size: 2.4rem 42.9rem; width: 2.4rem; height: 1.5rem; margin-right: .5rem } .gbp { background-position: 0 -1.8rem }
注意這其中有個css3中的 background-size的定義，這是個很少用到的css3屬性，顧名思義可以定義所引用的背景的size，並且是使用rem定義值，與自適應頁面是一套標准在里面(ps：這些頁面自適應是用rem值寫的)，所以這里雪碧圖就和自適應頁面相關聯，解決了上述自適應雪碧圖尺寸的問題。
background-size語法：background-size: length|percentage|cover|contain;
本篇文章對應實例頁面，請戳這里，注意如果打開是亂頁面(ie 360瀏覽器請自動關掉)，這里使用的是htts協議，服務器貌似在國外，證書安裝的問題，要右鍵查看源查看引用的css，這個時候會提示是非安全訪問，無視就行了(這個套路很像12306有木有，每次登陸買票都提示安全問題...)
這里稍稍吐槽下博客園，感覺好久功能性的東西不升級了，系統頁面也跟不上時代(貌似博客園的工作人員只有十幾個人...)，一些東西完全可以放出來的，比如test demo頁面，跳轉到本站測試頁面看運行效果，既華麗又不跳出...好吧，誰讓我當初省了空間自建站的事情那。
原文地址：自適應頁面中如何使用雪碧圖，薛陳磊 | Share the world