移動端圖標的自適應問題

眾所周知，移動端的各種元素都是自適應屏幕的，例如寬度，高度，字體大小等等，而這些我們都可以通過使用em、rem或者 % 來達到目的！

這里有一個問題是非常棘手的，就是圖標的自適應，由於其天生就是px，我們不可能從ps中切出的圖標是多少em吧...


一般我們采取的辦法如下：

1...........................................

<i class="icon"></i>
.icon{
    width:24em;
    height:24em;
    background: url(icon.png) no-repeat;
    background-size: cover;
}
就是采用標簽並設置相對大小，然后給其設置背景設置屬性background-size: cover，這樣就可以啦，缺點就是我們的圖片要足夠大，不然會出現失真的情況

2...........................................

采用線上的字體圖標，個人常用的是Font-Awesome，這是它的網站http://fortawesome.github.io/Font-Awesome/，雖然上面的圖標已經很豐富啦，但有時難免也會找不到我們所需要的，迫於產品或設計師的壓力不得不放棄這種方案簡潔易用的方案

3...........................................

使用svg格式的圖片，現在PhotoshopCC2015版的支持直接導出此格式的圖片，缺點是ie8及以下版本不兼容

4...........................................

把svg格式的圖片通過阿里媽媽ICONFONT平台（http://iconfont.cn/help/platform.html）轉換為字體，缺點是需要設計師強有力的配合
上面說了可以通過Photoshop直接導出svg，那么為什么還要設計師的配合呢？因為轉換為字體圖標時對svg格式的圖片有一定要求，一般要通過AI軟件配合官方給出的模板來制作svg圖標
我嘗試了用ps直接導出svg圖片然后上傳到阿里媽媽ICONFONT平台轉換為字體圖標，在ie低版本瀏覽器下會有較嚴重的鋸齒現象

上面四種方案各有千秋，具體根據項目實際情況取舍