移动端rem布局 雪碧图定位

雪碧图rem设置

假设.icon-sprite 为背景图 在这个上面需要设置background-size:10rem 20rem(这两个单位是背景图的宽和高)
小图标：.icon-email .icon-phone 的宽和高(还有background-position也用rem表示就行)就可以按照正常rem那样去写就行position

问题：

有些情况下会有图片多那么一个像素或者少一个像素，所以在拼合雪碧图的时候，图片之前就需要有一定的空隙，不能挨着

---

雪碧图百分百设置

当background-position为百分比的时候，将以图片的中心点为基准计算其相对位置，而使用px像素值时将以图片的左上角(0 0)为基准，如果是10% 20%这个值，那么就是以图片的10% 20%的坐标点，放置在容器的10% 20%的位置。这就是说明，如果是用百分比来做background-position的属性值的话，那么背景图片相对于容器的中心点事随时都在改变的。

盗用别人家的demo

定位百分比值（n m） 元素的宽高（w h） sprite图的宽高（k g） 需要显示icon的坐标(x y)

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

Paste_Image.png

s.gif

为了方便 可以写一个mixin

@mixin bgPosition($spriteWidth, $spriteHeight, $iconWidth, $iconHeight, $iconX, $iconY){ background-position: (($iconX / ($spriteWidth - $iconWidth)) * 100% ($iconY / ($spriteHeight - $iconHeight)) * 100%); }

后面使用的时候就可以宽高按rem来写 background-position 按照百分比来写

参考资料：http://www.jianshu.com/p/d3b19968a4c2