iOS 图片@2x 与@3x 的详解

iPhone 4 以前

2007年，初代iPhone发布，屏幕的宽高是 320 x 480 像素。下文也是按照宽度，高度的顺序排列。这个分辨率一直到iPhone 3GS也保持不变。

那时编写iOS的App(应用程序)，只支持绝对定位。比如一个按钮(x, y, width, height) = (20, 30, 40, 50)，就表示它的宽度是40像素，高度是50像素，放在(20, 20)像素的位置。

iPhone 4之后

2010年，iPhone 4发布，率先采用Retina显示屏，在屏幕的物理尺寸不变的情况下，像素成倍增加，达到 640 x 960 像素。

iOS 引入一个新的概念point(点)。点这个概念在iOS开发中十分重要，而非开发者很少关注。iPhone 4屏幕尺寸继续保持320 x 480，不过单位并非是像素，而是点。

在iPhone 3GS中，1个点等于1个像素。也就是说，点跟像素可以直接互换。

在iPhone 4中，1个点等于2个像素。

iPhone 4和iPhone 3GS的屏幕尺寸实际上是一样的，都是3.5英寸。同样一个点，实际上看起来是一样的。只是iPhone 4在单位英寸上像素更多，看起来更细腻。

开发iOS的时候，使用点作为基本单位会更加方便。列表对比

iPhone手机

[email protected]

iPad平板电脑

[email protected]

这里的点和像素可以初步理解成，一个点等于多少个像素。2x，就是1个点等于2个像素。

单位

手机屏幕的物理长度，使用英寸作为单位。比如iPhone 4屏幕是3.5英寸，iPhone 5 是4英寸，iphone 6是4.7英寸，这里的数字是指手机屏幕对角线的物理长度。

屏幕像素，比如iPhone 3GS屏幕是320 x 480像素，iPhone 4是640 x 960像素，这里的像素可以想象成屏幕上真正用来显示颜色的发光小点。

点，开发App时候使用的单位，是一个虚拟的单位，并非实际存在的，因此点有时也叫虚拟点。点这个单位，用于屏蔽各个屏幕设备的不同，兼容以前的程序。

每英寸有多少个像素，称为ppi(pixel per inch)。iPhone 4是640 x 960像素，对角线就是1154像素，除以3.5英寸，应该是330ppi。而官方给出的数字是326ppi。当像素太密，超过300ppi的时候，人眼也就不能区分出每个像素。因此iPhone 4的屏幕叫作Retina显示屏。Retina在英文中，是视网膜的意思。

开发中使用。

iPhone 4之后(x, y, width, height) = (20, 20, 30, 40)，就表示高度为30个点，宽度为40个点，放在(20, 20)个点的位置。

假设图片 example.png，大小为 30 x 40像素（这里的单位是像素，数字图片的单位通常都为像素）。当这张example.png在iPhone 4中使用时候，都占据屏幕上30 x 40个点。而因为iPhone 4中1个点等于2个像素，也就是30 x 40像素的图片，占据了60 x 80像素的屏幕，因此这图片在iPhone 4中看起来就会模糊。所以图片的像素应该为60*80像素。

在iPhone 6 Plus中，还出现3x模式，原理是一样的。

开发中美工切图要@2x和@3x的各一张，( @1x的（iPhone 3GS）已经淘汰了，所以不用切图 )。

例如：

[email protected] // 60 x 80像素

[email protected] // 90 x 120像素

当程序中使用example.png的时候，会根据屏幕模式自动选择对应的图片。屏幕2x模式，就会选择example2x.png, 3x模式就会优先选择[email protected]，假如[email protected]不存在，就选择example2x.png。