当前位置: 首页 > news >正文

手机加载优化 - 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、切图该怎么命名,不会命名怎么办?

之前我专门写了一篇关于界面切图命名规范的文章,请戳进去:

《UI设计师必须要知道的界面切图命名规范(升级版)》

 

注意:切图是需要注意几点:

 

① 切图输出格式必须为png24位、png8位、jpg格3种格式

② 同一模块内,切图大小应保持一致

③ 切图输出大小必须保持为偶数

④ 为了减小包的大小,所有切图尽量压缩后在给开发(包越小,你的boss越高兴,说不好会给你多发点年终奖哈)

具体更详细的规范你可点击查看《iOS界面设计规范》,谢谢

 

 

D、实现(可解决的方案):

1.@media(加载不同样式)

2.使用插件:http://imulus.github.io/retinajs/

相关文章:

  • 清明小感
  • [win7-oracle处理方法]--java.lang.Exception: Exception in sending Request :: null(转)
  • 0323-方法(函数)
  • 把每天当成人生第一天来过,把每一天当成人生最后一天来过
  • 第六届蓝桥杯java b组第五题
  • 在指定宽度和高度范围内最大化缩放图片
  • 戴尔大中华区解决方案顾问鲍荣钦:技术驱动,数据改变物流
  • HDU 2844 Coins
  • 上海商业发展研究院刘斌:变革下的供应链发展趋势
  • 刷脸社区来了 阿里云打造无卡化智能社区
  • 中国制造2025 带动机器视觉进入快速车道
  • 【转】Android 中的 Service 全面总结
  • Tomcat配置安全优化
  • MySQL中的explain命令
  • 黑马程序员__用普通类模拟枚举的实现原理
  • 网络传输文件的问题
  • [原]深入对比数据科学工具箱:Python和R 非结构化数据的结构化
  • 【翻译】Mashape是如何管理15000个API和微服务的(三)
  • exif信息对照
  • Java编程基础24——递归练习
  • JS+CSS实现数字滚动
  • learning koa2.x
  • leetcode378. Kth Smallest Element in a Sorted Matrix
  • Promise面试题,控制异步流程
  • Sequelize 中文文档 v4 - Getting started - 入门
  • Web标准制定过程
  • 京东美团研发面经
  • 买一台 iPhone X,还是创建一家未来的独角兽?
  • 前端攻城师
  • 如何邀请好友注册您的网站(模拟百度网盘)
  • 吐槽Javascript系列二:数组中的splice和slice方法
  • 远离DoS攻击 Windows Server 2016发布DNS政策
  • PostgreSQL之连接数修改
  • 教程:使用iPhone相机和openCV来完成3D重建(第一部分) ...
  • 进程与线程(三)——进程/线程间通信
  • ​LeetCode解法汇总2304. 网格中的最小路径代价
  • ​Spring Boot 分片上传文件
  • ​总结MySQL 的一些知识点:MySQL 选择数据库​
  • (31)对象的克隆
  • (C语言)球球大作战
  • (论文阅读40-45)图像描述1
  • (全注解开发)学习Spring-MVC的第三天
  • (四)Tiki-taka算法(TTA)求解无人机三维路径规划研究(MATLAB)
  • (转)3D模板阴影原理
  • .net core MVC 通过 Filters 过滤器拦截请求及响应内容
  • .net 使用$.ajax实现从前台调用后台方法(包含静态方法和非静态方法调用)
  • .NET 中什么样的类是可使用 await 异步等待的?
  • .NetCore 如何动态路由
  • .sh
  • @font-face 用字体画图标
  • @RequestMapping处理请求异常
  • @select 怎么写存储过程_你知道select语句和update语句分别是怎么执行的吗?
  • [Android] Amazon 的 android 音视频开发文档
  • [BZOJ 2142]礼物(扩展Lucas定理)
  • [C#][opencvsharp]opencvsharp sift和surf特征点匹配