移动端雪碧图sprite的实现

移动端适配的时候,通常是用rem作为长宽单位,因此,在不同的设备下,元素的实际宽高(px)是不一样的,如果是单张图片作为为背景图片的时候,最为方便,只要设置背景图片的属性background-size:contain|conver|100%;都能够将图片盖住整个div。

其次如果用雪碧图的话,那么得将 背景图片的大小和位置改为rem单位。background-position:x.x rem  y.y rem;background-size : xxrem yyrem;此处就是将按照设计稿的px来转换为rem。原理就是背景图片的大小,还有显示的背景图片位置都用rem来相对变化,就能够正确的显示对应的icon。

原文地址:https://www.cnblogs.com/alinjj/p/7899155.html