有效解决使用rem单位的csssprite图片缺角问题但是由于浏览器对小数单位精度分辨率的差异，在不同的设备上可能会出现部分图片少一点或者多一点的情况。有哪些解决方案？[Percentagebackground-position]既然不能写固定单位，那应该可以用百分比吧？其实上面的截图就是使用的百分比。这个方法网上大部分人都提到过，但是从博主的实践来看，并没有什么效果。可能是没做好..【提高数值精度】浏览器没有准确处理小数的方式，那就提高数值精度吧。比如将原来的`23.12456rem`增加了100倍，写成`2312.456rem`这样浏览器解析就会准确很多。下面说的方法就是[2]中的解法是怎么做的？如果ideaunit的值变大，整体尺寸也会变大，需要缩小回原来的尺寸。您可以使用csszoom或transformscale来减小尺寸。建议使用后者。原因可以看最后的【参考文档】小障碍。从图中可以看出，scale的缩放不会影响布局，所以可以使用伪元素让图片在文档流中进行缩放，写代码最后写下如下代码。icon-my{宽度：2.13333rem；高度：2.13333rem；位置：相对；'';宽度：10000%；/*放大100倍*/height:10000%;位置：绝对；左：0；顶部：0；背景：url(icon-index.png)no-repeat-245.33333rem0;/*单元尺寸放大100倍*/background-size:593.06667rem458.66667rem;变换原点：00；/*不从中心点缩放*/transform:scale(0.01);/*Scalebacktotheoriginalsize*/}相对于维护起来麻烦的csssprite，其他一些研究其实有DataURI（base64方式），不会遇到文章要解决的问题。建议阅读【参考文档】中的资料，近期人们会逐渐使用http2。有了多路复用的特性，似乎不用CSSsprite性能会更好。据说放大100倍在移动端页面会造成严重的性能问题，不过博主还没试过。。参考文档移动端性能对比：CSSSpritesvs.DataURI如果HTTP/2已经普及zoom和transform:scale()的区别Sprite背景图片定位移动适配（百分比方案）移动webapp自适应布局探索总结（提高数值精度的方案）github库https://github.com/think2011/gulp-Icons相关代码及调试可见上述代码库，欢迎star收藏。本文同时发表于think2011的博客2017-03-3120:07:23
