其实最近在做的APP项目中已经在开始重整代码，大部分图标也都打算使用iconfont里面的字体图标来完成，不过前期的页面还在更新当中，一时没办法放弃这种背景图片background-position百分比的方法，在做尝试的时候发现了这种格式速记的方法，比较省事的样子~
满足条件的格子有哪些？
background-position百分比格子，首先满足条件的格子有1格，2格，3格，4格，5格，6格，9格，11格，21格，而这些格子可以横纵自己组合，目前我使用的是6*6的格子（我自己沉得这种格子满适用的），而11格和21格还没有用到只是类推出的结果，不过应该也大差不差~
一维格子百分比计算
1格比容简单这里就不说了，先从2x1的格子来说吧，假设图片默认里面是横排可以放两个图标（横向尺寸对半分），即2格，首先background-position竖向的值即可以写0%也可以写100%，而横向则有区别，第一个图标应是0%，第二个图标应是100%。这时的background-size值是200%，而你实际需要的尺寸则跟百分比是没有关系的。再说5x1的格子，即横向平分了5份，从左向右只说position百分比为：0%、25%、50%、75%、100%这五个值。background-size的值为500%;
如果不明白的话不要捉急，后面我会画个图说明一下~
二维格子百分比计算
再来说3*2这种格子，假设图片横向平分3竖向平分2，即这张图可以存6个小标，这时background-size值是300%，而从左向右从上至下，background-position的值则为：0% 0%、50% 0%、100% 0%、100% 0%、100% 50%、100% 100%，现在有没有发现什么规律呢？
开始上图了：
因为background-size的值的计算是实际展示区域的尺寸是没有关系，只跟这个格子与格子总长有关，所以这个值可以说一目了然，上图也有列出来，比如8格的，size的值就是800%。
而且图中也有另外贴出每个格子相差的值，我自己感觉这个就是百分比格子计算的根本。
异变
当然实际应用中可能会出现较特殊情况，例如本来规划的图标就是100像素x100像素，但是突然有个效果图中图标尺寸需要的是160x160，在不影响之前写好的代码和图标的情况下，有两种方法可以解决：
方法1是最省事的，无需怎么计算，直接放大背景图将160px存放在单元格，但是不好的地方就是图片放大后占用的体积也会变大，反而不美。而方法2则需要用到下面说的较复杂（合并多格）的情况，但是在前期说的那些格子中并不是所有的格子都能满足条件，目前可以使用2格、4格、6格、9格、21格，继续看下面这张图吧~
写到这里就差不多了~不过我自己思考的可能会有一些缺陷没有发现的地方，欢迎童鞋讨论与指正~