雪碧图元素自适应--CSS黑魔法

背景：

我们都知道，如果一个元素使用了雪碧图背景，那么我们就必须限制这个元素的宽高尺寸。那么问题来了，一旦我们限制了元素的宽高，元素就没法自适应屏幕了，尤其是手机端，自适应场景非常多。这个时候很多人都会使用JS或者直接使用图片来达到自适应的目的。

的确，我也遇到过这样的问题，于是我百度了很久，也问过了很多人，但是没找到方法。

冥思苦想之下，终于想到了一个方法，纯CSS实现自适应。

 

思路如下：

1.首先用这里的方法实现元素尺寸的自适应：

http://www.cnblogs.com/joyho/articles/4730871.html

2.算出雪碧图和元素的尺寸比，然后在元素的background-size中设置该比例

3.根据上面的比例，设置元素的background-position值

 

代码参考如下：