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

像素、iPhone分辨率"/>

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 * 320iPhone 4/4s     4英寸（Retina）      960＊640          480 * 320iPhone 5/5s     4英寸（Retina）      1136 * 640        568 * 320iphone 6        4.7英寸（Retina）    1334 * 750        667 * 375iphone 6p       5.5英寸（Retina）    1920 * 1080       736 * 414iphone 6s       4.7英寸（Retina HD） 1334 * 750        667 * 375iphone 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 4：     4英寸的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