Retina、非Retina、点、像素、iPhone分辨率

1、@1x @2x和@3x 简介
首先看下切图的命名方式:
假设有两张图片名为:test_t@2x.png 和 test_t@3x.png,这是对于ios 切图来说的。
iPhone 4、5、6 是采用test_t@2x.png 这个图,iPhone 6 plus就采用test_t@3x.png
但是对于iPhone加载的顺序是:
在iPhone4、5、6 等系列,都是不需要带上@2x/@3x的图片后缀名,程序会优先加载 @2x 的图片,但如果需要加载 @3x 的图片,你需要写上 @3x;

(1)为解决ios分辨率而生
流程:点-->像素渲染-->物理像素-->物理设备;

这里写图片描述

备注:
<1> pixels 像素 [ ’ pɪksəl ]
<2> PPI:Pixels Per Inch所表示的是每英寸所拥有的像素(Pixel)数目。因此PPI数值越高,即代表显示屏能够以越高的密度显示图像。当然,显示的密度越高,拟真度就越高。

之所以有@1x @2x和@3x的出现,也是苹果为了便于程序员的开发,不同分辨率的设备,开发时统一为一个尺寸。例如iPad2 是768 x 1024,iPad Retina 是1536 x 2048,开发时都按 768 * 1024 操作。但实际上两者有一倍差异。为了达到最佳效果,使用的图片大小不一样。这时候就用同一个名称,但 Retina 的图加上 @2x 后缀。系统加载图片时,在 iPad2 上会加载 @1x 的图;在 1536 * 2048 的设备上,会加载 @2x 的。@3x 现在用于 iPhone 6/6+ 上。

(2)@1x @2x和@3x也是 XCode 软件所需要的UI资源。你命好名称以后,ios会根据设备型号自动挑选合适的@1x,@2x或@3x尺寸来使用。

(3)MAC 电脑上的APP设计软件Sketch,他切图之后保存的图片格式也是带有@1x @2x和@3x。 在这里可以解读@1x @2x和@3x为图片格式,成为图片后缀名。

(4)苹果IOS程序开发不同分辨率的设备统一为一个尺寸而标记的。@3X就是@1X分辨率的3倍。@3x也是倍数的解读。
附带一提:iOS8渲染操作中使用前缀带有@1x、@2x 和@3x 的测试图像,代码会优先载入3x 图像。@2x图像不被加载。

2、iPhone 各版本的屏幕尺寸,分辨率,点坐标

型号             屏幕尺寸            分辨率(高*宽)     换算成点坐标

iPhone 3gs      3.5英寸(非Retina)  480 * 320         480 * 320

iPhone 4/4s     4英寸(Retina)      960*640          480 * 320

iPhone 5/5s     4英寸(Retina)      1136 * 640        568 * 320

iphone 6        4.7英寸(Retina)    1334 * 750        667 * 375

iphone 6p       5.5英寸(Retina)    1920 * 1080       736 * 414

iphone 6s       4.7英寸(Retina HD) 1334 * 750        667 * 375

iphone 6sp      5.5英寸(Retina HD) 1920 * 1080       736 * 414

(2)IOS 7 及其以上系统版本,只能运行在iPhone 4 及其以上的手机上,所没有非Retina;

1x:           非Retina,3.5英寸;常用图片的名称:"Default.png"2x:           Retina,  3.5英寸;常用图片的名称:"Default@2x.png";
Retina 44英寸的Retina;常用图片的名称:"Default-568h@2x.png";
Retina HD 4.7:高清Retina,4.7英寸;
Retina HD 5.5:高清Retina,4.7英寸;

3、举例说明
(1)Retina 屏幕:视网膜屏幕(高清屏幕)

(2)35*35,代表35个点乘以35个点,至于一个点对应多少像素,由Retina 屏幕 和 非Retina 屏幕决定;
非Retina 屏幕:1个点---1个像素(35*35)
Retina 屏幕:1个点---2个像素(70*70)

(3)分辨率指像素,一个像素即一个格子;实际上手机屏幕是由无数个格子组成的;

(4)一般图片要准备两份(此处暂不考虑@3x),比如说代码中要显示一张35*35的图片,若显示在非Retina屏幕上,则是35*35像素;显示在Retina屏幕上则是70*70像素;若只有一套35*35像素的图片,当显示在视网膜屏幕上会很模糊,因为35*35像素会被拉伸成70*70像素,所以变模糊了。
这两套图片的命名规范:
icon.png
icon @2x.png (尺寸上,宽度和高度都是icon.png宽度和高度的2倍)

(5)虽然图片名中有 @2x,但是加载图片时,使用的图片名一般并不带 @2x,因为加载图片“是根据设备自动加载的“,如使用 [ UIImage iamgeNamed: @”icon”] 当去加载这张图片时,首先会检测你的手机是不是视网膜屏幕,若是非视网膜屏膜,则会加载icon.png;若是Retina屏幕,则会自动加载icon@2x.png 。
注意:软件图标名称的命名规范(一般都命名为icon或者icon@2x)

参考文章:移动APP切图术语解读:什么是@1x @2x和@3x

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值