这个方法，在chrome的模拟器里测试过很多机型，效果不错，不过它只适用于不使用雪碧图的背景图片，如果要在lib-flexible的项目里使用雪碧图作背景图片，同时又要考虑retina屏的话，需要将上面这个方法稍微改动一下。

首先看下不使用lib-flexible时，雪碧图背景在retina下是怎么做的，以腾讯的一个活动页面来说明，这是它在使用1x的雪碧图时某个元素的background的样式：

这是它在使用2x的雪碧图时某个元素的background的样式：

总结下它这个做法：

1）先把设计稿切出的图，合并成一张雪碧图，腾讯这个例子的设计稿是320的，所以它的切图都是1x的，这张雪碧图也就是1x的，大小为643 * 152

2）设计稿放大2倍，切图合并成一张2x的雪碧图，大小为1286 * 304

3）普清屏下只应用background-image和background-position属性，设置1x雪碧图作为背景，代码参考截图

4）高清屏下除了应用background-image和background-position属性，还要应用background-size属性，并且这个background-size的大小要设置为1x雪碧图的大小，background-position的值要与（3）里配置的值相同，代码参考截图。

如果把它做成一个mixin的话应该是类似这样的：

.retina-image(@background-image,@background-pos-x,@background-pos-y,@background-size-x,@background-size-y) { background-image: url("../img/@1x/@{background-image}?v=@@version"); background-position:@background-pos-x @background-pos-y; @media only screen and (-webkit-min-device-pixel-ratio: 1.25), only screen and (min-resolution: 120dpi), only screen and (min-resolution: 1.25dppx) { & { background-size: @background-size-x @background-size-y; background-image: url("../img/@2x/@{background-image}?v=@@version") !important; } } //1dppx = 1devicePixelRatio, 1dppx = 96dpi. }

考虑到1x不会再有的情况，上面这个mixin可以再调整一下：

.retina-image(@background-image,@background-size-x,@background-size-y,@background-pos-x,@background-pos-y) { background-image: url("../img/@2x/@{background-image}?v=@@version"); background-size: @background-size-x @background-size-y; background-position:@background-pos-x @background-pos-y; @media only screen and (-webkit-min-device-pixel-ratio: 2.5), only screen and (min--moz-device-pixel-ratio: 2.5), only screen and (-o-min-device-pixel-ratio: 5/2), only screen and (min-device-pixel-ratio: 2.5), only screen and (min-resolution: 240dpi), only screen and (min-resolution: 2.5dppx) { & { background-image: url("../img/@3x/@{background-image}?v=@@version") !important; } } //1dppx = 1devicePixelRatio, 1dppx = 96dpi. }

默认用2x的图，devicePixelRatio大于等于2.5的设备用3x的图。这个调整后的mixin就是lib-flexible下，使用雪碧图背景的方法，应用举例：

@font-size-base: 75; .btn-android { .retina-image("sprite.png", 414rem/@font-size-base, 232rem/@font-size-base, 0, -64rem/@font-size-base); }

sprite.png用750设计稿的切图合并后的大小是414 * 232，.btn-android这个按钮的position为0 –64px。

尽管这个方法看起来完美，但是不建议使用，因为它的适配效果不好，这是iphone6下的效果：

看起来不错，那是当然的，因为这就是它默认没有任何缩放的效果。然后看iphone6 plus的效果：

有点差异，但好像还能接受。再看看nexus6的效果：

这就不能忍了，样式差的离谱。造成这个差异的原因也很简单，就是rem的副作用，腾讯的页面里所有position,size都是不带小数的数值，而且2x跟1x之间是整数的翻倍，而不是3x跟2x之间的1.5倍，lib-flexible会导致大部分的设备下position和size都是小数数值，所以很难保证背景图片缩放后还能通过position显示到正确的位置：

从网页优化的角度来说，减少请求数，减少请求数据大小是两个基本的思路，雪碧图就是一个减少请求数但是不能减少请求数据量的方法。lib-flexible不能使用兼容3x屏的雪碧图的情况看起来是它一个大的缺陷，但实际上也并非如此：雪碧图如果用不了，就采用别的思路来优化，我能想到的更好的就是图片的延迟加载和懒加载，在app页面里控制好默认只加载首屏的图片，并且采用延迟和懒加载的方式，避免阻塞页面的加载，也能有极好的用户体验，打开手机淘宝的页面给人的感觉就是如此，而且你去看看手机淘宝的应用会发现它根本就没有用雪碧图，但是速度还是很快。

4. 结束语