移動端適配之sprite雪碧圖背景定位

　　移動端適配通常我會使用rem進行適配，大體操做就是按照必定尺寸設計稿進行製做，最後將全部px值轉換爲rem，可是一些手機背景精靈圖(cssSprite)就會出現一些偏差(1px左右)，若是公司要求不高倒也無所謂，可是我不能忍啊。

　　方法就是利用background-position百分比值替換rem值

　　要想獲得定位的百分比值（n m），咱們須要 元素的寬高(w h), sprite圖的寬高(k g),咱們須要顯示icon的座標（x y），公式以下：

1 n = -x / (w-k) * 100% 
2 m = -y / (h-g) * 100%

　　利用SCSS方法處理後：

//$spriteWidth 雪碧圖的寬度px
//$spriteHeight 雪碧圖的高度px
//$iconWidth 須要顯示icon的寬度px
//$iconHeight 須要顯示icon的高度px
//$iconX icon的原始x座標
//$iconY icon的原始y座標
//
@mixin bgPosition($spriteWidth, $spriteHeight, $iconWidth, $iconHeight, $iconX, $iconY){
    background-position: (($iconX / ($spriteWidth - $iconWidth)) * 100% ($iconY / ($spriteHeight - $iconHeight)) * 100%);
}
.icon2{
    width: 0.74rem;
    height: 0.64rem;
    @include bgPosition(1072, 442, 74, 64, 188, 5);
}

//進一步擴展
//
@mixin bgPositionSameSprite($iconWidth, $iconHeight, $iconX, $iconY){ 
　　//將$spriteWidth和$spriteHeight放入方法，這樣使用時就只須要4個參數，也避免了後期修改精靈圖尺寸處處搜索替換
　　$spriteWidth : 1072; 
　　$spriteHeight : 442;
　　@include bgPosition($spriteWidth, $spriteHeight, $iconWidth, $iconHeight, $iconX, $iconY); 
} 
.icon3{
    width: 0.74rem;
    height: 0.64rem;
    @include bgPositionSameSprite(74, 64, 188, 5);
}