移动端适配之sprite雪碧图背景定位

Posted 2020-10-20 SSXfont

       移动端适配一般我会使用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);
}