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

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

阅读 6.9k
6 个回答

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

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

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

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

新手上路,请多包涵

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题