移动端精灵图适配问题-----你是不是掉坑里了？

最近在学习移动的rem布局，写一个小案例的时候遇到了精灵图适配的问题，特此记录的一下。

这是一张宽度为750px的设计图，我把它的宽度分成15份，每一份的大小作为html的字体大小，相当于1rem=50px,然后用媒体查询适配各种屏幕。

• 当我写到这地方时：

  

  图标是一张宽520px高520px的精灵图：

  

  在750的屏幕下测量图标大小是100x100的，大家都知道精灵图在手机端要进行缩放，我就想当然的把精灵图缩放成260px X 260px 的，然后测量的图标位置 代码如下：

@baseFont:50px;
width: 100rem / @baseFont;
        height: 100rem / @baseFont;
        background: url(../images/icons.png) no-repeat 0 -30rem/@baseFont;
        background-size: 260rem / @baseFont auto;

但是出现的下面的情况：

图标变小了，，当时我不明白为什么会这样，试了好多方法，比如把盒子缩小，精灵图放大等等，都没有得到解决。于是我回过头测量了精灵图上的图标的大小，也是100x100，这才明白不用缩放，只要让盒子，图标位置，精灵图三者随着字体的变化都能比例缩放的就行了，就改成的以下代码：

@baseFont:50px;
        width: 100rem / @baseFont;
        height: 100rem / @baseFont;
        background: url(../images/icons.png) no-repeat 0 -60rem/@baseFont;
        background-size: 520rem / @baseFont auto;

问题得到的解决，还是精灵图的缩放没理解到位，只记得怎么缩放，不知道按具体情况具体分析，这个就是图标在精灵题图上大小和屏幕的图标的大小一致，只要考虑按字体等比例缩放就行了，不用缩放精灵图。