最近為移動端使用rem雪碧圖小圖示自適應困擾，想了半天終於找到解決方案！難點在於雪碧圖要跟隨螢幕縮小，下面我們進入正題！

    大家先要明白rem是什麼，我給大家個新的理解，rem的本質就是百分比轉換，不明白的童鞋可以具體去惡補下rem相關知識！既然rem的本質是百分比轉換，那麼我們也可以通過同樣的方法轉換雪碧圖，下面上案例！

    假設1rem=100px，那麼我們可以設定雪碧圖寬5rem，高2rem，小圖示寬0.5rem，高0.3rem，我們在傳送請求的時候就可以設定

width: 0.5rem;
    height: 0.3rem;

background: url('填寫雪碧圖url') no-repeat;
    background-size: 5rem 2rem;
    background-position:-0.4rem -0.3rem;

  通過以上設定簡直是完美，簡單和大家說下原理，width和height代表小圖示的大小，也就是web頁面所展示的小圖示大小，大家可以理解為貓眼，通過貓眼定位到雪碧圖某個區域，也就是使用background-size，我們就可以拿到小圖示icon了，background-size的作用是同比縮放雪碧圖，這個比例按照手機螢幕來的。

假設手機螢幕375px，上文的小圖示icon是按照ui姐姐給的750psd切出來的，在750的psd中我們設定1rem=100px,那麼最後我們在375這部手機上展示的圖片大小應該是25px*15px。在375這部手機上，1rem應該變成50px了，因為375是750是的一半，如果大家對rem不熟悉，建議去惡補下rem相關知識點！此時的雪碧圖大小為250px*100px,因為雪碧圖縮小了，所以雪碧圖中的icon也縮小成25px*15px,接下來我們要做的就是把雪碧圖中的這個icon取出來，按照同比縮小原則，icon居然雪碧圖的左右兩邊距離也要縮小成一半，即icon居然雪碧圖左邊20px,距離雪碧圖頂部15px,大家最後來核對下雪碧圖的background-position,按照375的手機1rem是50px，換算後看看是不是距離雪碧圖左邊和上面20px和15px,那就完美了！

  最後和大家說個rem的坑，因為rem是百分比換算的，所以rem會出現小數點，使用圖示時在有些手機瀏覽器上會出現顯示不全，小編想到的解決辦法就是擴大圖示區域，解決rem換算小數點問題，上面的icon是50px*30px，我們可以用width：0.6rem，height:0.4rem,然後我們只要把

background-position:-0.35rem -0.25rem就完美解決了，原理就是多從雪碧圖獲取一段空白的區域，來解決rem轉換產生的誤差，大家有興趣可以去嘗試下！