手机加载优化 - 2x、3x图
人们常说,现在的流量不值钱了,图越大越好咯!
我想说的是,浏览器虽然不值钱了,但速度还是略快吧!
文章来自:UI妹儿
icon_alipay.png→iPhone 1-3代的手机(已经不考虑了)
icon_alipay@2x.png→iPhone4/4S/5/5S/6/6S/7对应尺寸,这就是我们通常所说的2倍图
icon_alipay@3x.png→iPhone6P/6SP/7P使用的尺寸,这就是3倍图
A、到底哪些资源需要切图,哪些不需要切图?
① 只要是无法用代码来实现和表达出来的,就需要切图
② 如果实在不清楚要不要切图,多和开发沟通,他会告诉你哪些是需要你切图的
B、切图需要切几套?(这里我只以iOS作为标准,安卓下期再说)
① 理论上,我们需要切3套图,是为了更好的适配。
② 在实际工作中,iOS只需要切2套图就可以,分别为:@2x和@3x
<img src="https://pic2.zhimg.com/50/v2-7d300d81b4ef950928b6d32690df6fb8_hd.jpg" data-caption="" data-size="normal" data-rawwidth="232" data-rawheight="381" class="content_image" width="232">
C、切图该怎么命名,不会命名怎么办?
之前我专门写了一篇关于界面切图命名规范的文章,请戳进去:
注意:切图是需要注意几点:
① 切图输出格式必须为png24位、png8位、jpg格3种格式
② 同一模块内,切图大小应保持一致
③ 切图输出大小必须保持为偶数
④ 为了减小包的大小,所有切图尽量压缩后在给开发(包越小,你的boss越高兴,说不好会给你多发点年终奖哈)
具体更详细的规范你可点击查看《iOS界面设计规范》,谢谢
D、实现(可解决的方案):
1.@media(加载不同样式)
最新文章
- HTML5 语义元素(二)文本内容
- ASP.NET MVC 利用IRouteHandler, IHttpHandler实现图片防盗链
- [半转]1px边框 移动端
- ci获取当前url链接的分组,控制器,方法
- MongoDB error: couldn't connect to server 127.0.0.1:27017 src/mongo/shell/mongo.js(转)
- NTP服务器地址及IP
- 利用HttpModule开发asp.net页面、ashx等访问时session失效的统一处理入口
- Android点击Button实现功能的几种方法
- mysqldump的流程
- BZOJ 2190 仪仗队
- HDU 5776 sum
- UNIX环境高级编程——记录上锁(fcntl函数)以及死锁检测
- python中取整数的几种方法
- mysql 重点性能测试指标
- Linux基础实操一
- Android 安全退出应用程序的方法总结
- 给AFNetworking添加请求缓存功能实现在没有网络的情况下返回缓存数据
- python安装cv2
- 2017-2018-2 20155315《网络对抗技术》Exp9 :Web安全基础
- CharacterRangeTable
热门文章
- verilog behavioral modeling --loop statement
- centos7.2快速搭建LAMP平台
- 【php】 布尔值判断
- python的部分内置函数
- OSPF 提升四 Network Types &; FRAM-RELAY
- pytorch中的math operation: torch.bmm()
- DefaultActionInvocation 源码
- CodeForces contest/776 A+B+C题解
- C++之字符串表达式求值
- ecplise 使用快捷键