雪碧图+rem适配

雪碧图（CSS Sprites）是什么？

雪碧图就是将很多小图标放在一张图片上，就称为雪碧图 （也叫做精灵图）

雪碧图有什么用？

当一个前端页面上有许多固定位置的小图标时，每次访问这个页面。都需要从服务器上去发送请求获取图片资源，那么如果将这些图标都放在一个图里面，我们可以减少与服务器建立连接次数，提高页面加载速度。也是种前端性能的优化。

理解大法（可以略过直接进入使用步骤↓）

再讲解雪碧图的使用步骤之前，我们可以先了解下sprites图其实就是将一块大图（什么样的大图呢？就是多个小图合成在一起的大图）用来做背景图。

比喻一下使用雪碧图的整个过程（可能并不形象）
背景图就像是一块桌布(有着多种不规则图案的桌布)
使用方法是将其铺在桌子上，但是桌子上指定位置上具体展示的是哪块图案？
我们并不能预先知道。如果我们想要去控制某块区域展示这块桌布上的某个图案，我们可以拿一把剪刀，把图案剪下来，哪里需要贴哪里。

使用步骤

1. 找到页面上的固定的图片（不会动态发生改变的图片) 

2. 将以上图片制作为雪碧图 在线制作雪碧图 

3. 把这张背景图先载入我们页面中

   .background_img{
       background: url('http://images0.zaijiawan.com/wechat/HomePage/sprites.png@!ori') no-repeat;
       background-size: 101px;
   }

4. 之前的图标我们使用的大多是标签，主要用于前景图，尽然雪碧图实现的原理是用的背景图，所以现在就不能再用标签了，将其换成

   标签.原来标签的css属性我们可以保留下来

   
   .menu_img {
       width: 23px;
       height: 23px;
       margin-left: calc(50% - 11.5px);
       margin-top: 5px;
       /*margin-bottom: 2%;*/
   }
   

      //原代码
      
   
               
               
               
   主页
           

   //更改img标签，并添加上背景图
    
   
               
   
               
               
               
   主页
           

5. 我们只需要利用背景图的background-position的属性就可以随意的截取大背景图的任意“分图”，background-position 的位置可以参考在线生成雪碧图上的图片位置，最后再去浏览器上调整适当位置就行了 

以上整个雪碧图的流程就结束了。

最后的叨唠（你可能会遇到以下问题）

• 雪碧图太大了！放在指定的位置只能显示一部分！！?

有两个解决方法：

1.上传不饿毙图时就按照你页面上需要的大小传

2.使用background-size 属性缩放整块背景图（这里要注意：背景图伸缩了几倍，其对应的background-position 也要同比例的缩放）

html{font-size:10px}
@media screen and (min-width:321px) and (max-width:375px){html{font-size:11px}}
@media screen and (min-width:376px) and (max-width:414px){html{font-size:12px}}
@media screen and (min-width:415px) and (max-width:639px){html{font-size:15px}}
@media screen and (min-width:640px) and (max-width:719px){html{font-size:20px}}
@media screen and (min-width:720px) and (max-width:749px){html{font-size:22.5px}}
@media screen and (min-width:750px) and (max-width:799px){html{font-size:23.5px}}
@media screen and (min-width:800px){html{font-size:25px}}