移动端适配CSS Sprites雪碧图

最近开发了一个小项目,其中的小图标,真的不算少。光这些小图标的请求,就把这个项目的性能带动的slow、slow、slow。

所以就想起了雪碧图使用,定位的用法。那么如何来确定这个比例呢?

单位使用rem,假设屏幕宽为375px(iphone6的屏幕宽)为标准。参照淘宝的h5设计尺寸标准,

项目中使用的比例: 比例 = 屏幕宽/ 10 = 375 / 10 = 37.5

所以我们对应的设计稿上的尺寸(如果设计稿尺寸恰好是375),就是使用设计稿中对应的图片尺寸除以拿到的图片原始尺寸。

举个例子:

1.   设计稿中的图片是50*50,而UI给你的图片是52*52的,所以可以知道,我们需要将52*52的图片缩小 52/50 = 1.04 倍。

      aB = 52/50 = 1.04;

2.   实际上,我们设计的样式的width和height换算成rem单位的话,就是  50 /37.5 = 1.3333rem(我保留了四位小数)。

     img{ 1.3333rem; height: 1.3333rem; }

3.  使用CSS Sprites生产雪碧图。

     这里的位置是截屏css cprites工具页面,稍后上传

可以把css代码拷贝出来,里面有对应图片的background-position;

.img{background:url(../images/img.png)  no-repeat;background-size:283px 240px},需要将该行的background-size的px换算成为rem;

以上述为例,383 / 37.5 / aB  = 7.2564rem; 240 / 37.5 / aB = 6.1538rem;所以background-size: 7.2564rem  6.1538rem;

background-position:-48px -56px;  根据上面的换算, 48 / 37.5 / aB =  1.2308rem; 56 / 37.5 / aB = 1.4359rem;

所以,background-position: -1.2308rem  -1.4359rem;

经过这样,换算后,显示的图片,就会适应自己设置的固定区域了。

原文地址:https://www.cnblogs.com/auto123-num/p/8797242.html