CSS使用rem单位时，雪碧图的调整方法

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/weixin_41196185/article/details/82707081

雪碧图是利用background-position来定位的，而这个位置是针对背景图片的大小来说的。所以不能设置background-size为100%,cover之类的，因为这样改变了背景图片的尺寸，就不能用位置定位了。

比如一张雪碧图的尺寸是500 * 300，其中一个图标的位置离左上角的距离约为20px, 20px

那么background-position: -20px -20px就可以显示这个图标。

background-position: -20px -20px;

那么在rem布局时要如何调整呢?

因为rem是相对的，因此我们使用rem单位时，背景图片的大小也必须随之变化，所以background-size要同时变为rem，具体怎么变呢？

首先，我们查看图片的原始尺寸，比如是 500 * 300；根据html的font-size进行转换，假设html的font-size是100，则background-size：5rem 3rem

background-size：5rem 3rem

这样就能在使用rem的时候也能愉快地应用雪碧图了。