移動端適配CSS Sprites雪碧圖

最近開發了一個小項目，其中的小圖標，真的不算少。光這些小圖標的請求，就把這個項目的性能帶動的slow、slow、slow。

因此就想起了雪碧圖使用，定位的用法。那麼如何來肯定這個比例呢？

單位使用rem，假設屏幕寬爲375px(iphone6的屏幕寬)爲標準。參照淘寶的h5設計尺寸標準，

項目中使用的比例： 比例 = 屏幕寬/ 10 = 375 / 10 = 37.5

因此咱們對應的設計稿上的尺寸（若是設計稿尺寸剛好是375），就是使用設計稿中對應的圖片尺寸除以拿到的圖片原始尺寸。

舉個例子：

1.   設計稿中的圖片是50*50，而UI給你的圖片是52*52的，因此能夠知道，咱們須要將52*52的圖片縮小 52/50 = 1.04 倍。

      aB = 52/50 = 1.04;

2.   實際上，咱們設計的樣式的width和height換算成rem單位的話，就是  50 /37.5 = 1.3333rem(我保留了四位小數)。

     img{ width: 1.3333rem; height: 1.3333rem; }

3.  使用CSS Sprites生產雪碧圖。

     這裏的位置是截屏css cprites工具頁面，稍後上傳

能夠把css代碼拷貝出來，裏面有對應圖片的background-position;

.img{background:url(../images/img.png)  no-repeat;background-size:283px 240px}，須要將該行的background-size的px換算成爲rem;

以上述爲例，383 / 37.5 / aB  = 7.2564rem; 240 / 37.5 / aB = 6.1538rem;因此background-size: 7.2564rem  6.1538rem;

background-position:-48px -56px;  根據上面的換算， 48 / 37.5 / aB =  1.2308rem; 56 / 37.5 / aB = 1.4359rem;

因此，background-position: -1.2308rem  -1.4359rem;

通過這樣，換算後，顯示的圖片，就會適應本身設置的固定區域了。