自適應頁面中如何使用雪碧圖

　　自適應頁面你確定據說過，雪碧圖想必你也據說過，不過在自適應頁面中使用雪碧圖應用的場景卻很少，由於不少場景裏自適應頁面(移動端頁面)的小圖標啥的基本都作成字體圖標了，操做起來也比較方便，不過有時候合成字體圖標的時候也比較麻煩，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