javascript - 关于移动端rem布局下，CSS Sprites定位问题。

Question

在正常的PX布局下CSS Sprites布局很简单，但是在rem（亦或者是百分比布局情况下）这种移动端自适应的布局下面该如何使用呢？

Answer 1

可以使用 background-position:10% 这种定位方式。可以解决rem定位时不同屏幕定位不准的问题，缺点是CSS Sprites 只要改了一点位置就需要全部重新定位

Answer 2

如果要准确的定位雪碧图中的图标依然是需要使用 px，背景图片是不会随着元素的宽高而变化的；
建议在移动端尽量的使用字体图标，可以随元素的大小而变化。如果一定要使用图片，并且必须是响应式的可以使用img 标签

Answer 3

我自己修改了gulp的那个sprite 插件，替换CSS的那个模板部分，直接输出rem单位，不输出px。然后就能用来。哈哈

Answer 4

我是background-position:5rem 5rem;之类的，和px一样用法

Answer 5

一样用rem

Answer 6

雪碧图采用transform:scale(xxx)进行缩放，可解决因小数导致的定位不准确问题