84669 person learning
152542 person learning
20005 person learning
5487 person learning
7821 person learning
359900 person learning
3350 person learning
180660 person learning
48569 person learning
18603 person learning
40936 person learning
1549 person learning
1183 person learning
32909 person learning
在正常的PX布局下CSS Sprites布局很简单，但是在rem（亦或者是百分比布局情况下）这种移动端自适应的布局下面该如何使用呢？
认证0级讲师
可以使用 background-position:10% 这种定位方式。可以解决rem定位时不同屏幕定位不准的问题，缺点是CSS Sprites 只要改了一点位置就需要全部重新定位
如果要准确的定位雪碧图中的图标依然是需要使用 px，背景图片是不会随着元素的宽高而变化的；建议在移动端尽量的使用字体图标，可以随元素的大小而变化。如果一定要使用图片，并且必须是响应式的可以使用img 标签
我自己修改了gulp的那个sprite 插件，替换CSS的那个模板部分，直接输出rem单位，不输出px。然后就能用来。哈哈
我是background-position:5rem 5rem;之类的，和px一样用法
一样用rem
雪碧图采用transform:scale(xxx)进行缩放，可解决因小数导致的定位不准确问题
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
可以使用 background-position:10% 这种定位方式。可以解决rem定位时不同屏幕定位不准的问题，缺点是CSS Sprites 只要改了一点位置就需要全部重新定位
如果要准确的定位雪碧图中的图标依然是需要使用 px，背景图片是不会随着元素的宽高而变化的；
建议在移动端尽量的使用字体图标，可以随元素的大小而变化。如果一定要使用图片，并且必须是响应式的可以使用img 标签
我自己修改了gulp的那个sprite 插件，替换CSS的那个模板部分，直接输出rem单位，不输出px。然后就能用来。哈哈
我是background-position:5rem 5rem;之类的，和px一样用法
一样用rem
雪碧图采用transform:scale(xxx)进行缩放，可解决因小数导致的定位不准确问题