---

<!–markdown–>## 前言

之前对雪碧图的自适应大小并没有太多的了解，一直停留在scale大法的地步。今天趁着另一个同学来问我，去好好了解了一下。
主要参考了 http://www.cnblogs.com/aaronjs/archive/2015/08/20/4744014.html。这位同学写得很好，简单明了清晰。

情景

当我们在使用 rem 做移动端布局的时候,在享受rem的方便的时候，往往也很头痛雪碧图的自适应问题。毕竟雪碧图无法像 rem 一样跟着屏幕一起变大变小。于是乎就有了像 scale、或者使用多套雪碧图来适配多种屏幕等等。这里讲另一种方法。通过
background-position 和 background-size 的百分比属性。

主要思路

• 通过 background-size 缩放雪碧图
• 通过 background-position 百分比获取图片片段

小细节

• background-size 的百分比是相对于元素本身的
• background-position 的百分比是相对于雪碧图的
• 为了减少数字计算精度，尽量使雪碧图横竖排的个数可以让100整数， 如4、5。

完整Demo

<p data-height="265" data-theme-id="0" data-slug-hash="PzbVRp" data-default-tab="css,result" data-user="hijimo" data-embed-version="2" class="codepen">See the Pen <a href="http://codepen.io/hijimo/pen/PzbVRp/">PzbVRp</a> by jimo (<a href="http://codepen.io/hijimo">@hijimo</a>) on <a href="http://codepen.io">CodePen</a>.</p>
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>

在线demo:传送门