1. lib-flexible不能与响应式布局兼容
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. 结束语
本文主要研究了lib-flexible与响应式布局，1px边框和retina屏里背景图片适配的问题，希望能对你使用lib-flexible有所帮助，文中提出的方法不一定是最好的办法，而且可能还有遗漏的情况未考虑到，尤其是最后的背景图片问题，仅仅是webapp里图片处理的一个细小分支，有不对的地方，请您多多指正！
谢谢阅读：）
查看更多关于基于淘宝弹性布局方案lib-flexible的问题研究_html/css_WEB-ITnose的详细内容...