刚开始做适配的时候，有一件事是比较头疼的，那就是雪碧图的适配，主要是background-size和background-position的配置比较烦。那么怎么进行在使用fexible.js的时候适配雪碧图呢，方法如下：
假如我有下面这张雪碧图，设计图给我的是按640的分辨率来做的。
这张雪碧图的大小为200px*458px
假设现在我们要用的那个勋子的背景图。分为以下几步：
1、测量勋字这张背景图的大小，大小为：75px*85px
2、测量这个勋字在雪碧图的位置，也就是设置background-position:.经测量，他在雪碧图的位置为 x:-123px，y:-7px
3、对着张雪碧图进行换算：看下面代码：
知道了上面的尺寸，我们就行换算即可，将每个值除以640再乘以10 为什么这么算，可以看看源码
要使用这样雪碧图：
<!-- 长宽为： --> width: 75/640*10=1.171875rem; height: 85/640*10=1.328125rem; <!-- background-size为 --> <!-- 因为整张雪碧图的宽度为200px, --> background-size: 200/640*10rem auto; <!-- background-position为： --> background-position: -123/640*10rem -7/640*10rem;
html:
<i></i>
css：
.item1{ width: 75/640*10=1.171875rem; height: 85/640*10=1.328125rem; margin: 20px auto; background: url('../images/itemBg.png') no-repeat; // 因为整张雪碧图的宽度为200px, background-size: 200/640*10rem auto; 等于 background-size: 3.125rem auto; // 该背景图在雪碧图的位置 background-position: -123/640*10rem -7/640*10rem; 等于 background-position: -1.921875rem -0.109375rem; display: block; }
因为换算比较麻烦，所以建议使用sass或者less来进行计算。具体效果我放在了github上，可以看看：
https://github.com/xianyulaodi/flexibleDemo
适配的原理解析
先来了解一些概念
在进行分析之前，首先得知道下面这些关键性基本概念(术语)。
物理像素(physical pixel)