移动端图标的自适应问题

众所周知，移动端的各种元素都是自适应屏幕的，例如宽度，高度，字体大小等等，而这些我们都可以通过使用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低版本浏览器下会有较严重的锯齿现象

上面四种方案各有千秋，具体根据项目实际情况取舍

转载于:https://www.cnblogs.com/jiujiaoyangkang/p/4766724.html