移动端图标的自适应问题
2015-08-28 15:42
190 查看
众所周知,移动端的各种元素都是自适应屏幕的,例如宽度,高度,字体大小等等,而这些我们都可以通过使用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低版本浏览器下会有较严重的锯齿现象 上面四种方案各有千秋,具体根据项目实际情况取舍
相关文章推荐
- 别人的App(1)
- Gulp构建Android项目,安装APK
- Android自定义控件
- iOS 二进制数组转成16进制字符串
- Android自定义控件
- 在android里用ExpandableListView实现二层和三层列表
- Android摄像头:只拍摄SurfaceView预览界面特定区域内容(矩形框)---完整(原理:底层SurfaceView+上层绘制ImageView)
- Android Studio 错误 com.android.dex.DexIndexOverflowException: method ID not in [0, 0xffff]: 65536
- 设置Android app背景图片(Android studio)
- iOS 9的App Thinning方案如何节省存储空间
- cocos2d-x之函数更新
- Android Studio初认识——调用相机
- Android通过注解初始化绑定View
- Unity打包xcode工程编译错误及解决方法
- iOS5系统API和5个开源库的JSON解析速度测试
- 刘备学Android目录
- Objective-C代码规范(1)
- android sdk更新不成功问题
- 六款值得推荐的android(安卓)开源框架简介。
- Android Studio App设置线性布局LinerLayout控件垂直/水平方向排列