1. 点和像素的区别
以iPhone 3GS、iPhone 4为例：iPhone 3GS 屏幕的宽高是 320 x 480 像素，其中视图的位置就是在屏幕的绝对位置。如视图frame = (20, 30, 40, 50)，就表示它的宽40px，高度50px，起始点为(20, 30)。iPhone 4 物理尺寸不变，而屏幕像素变为640 x 960。
iPhone 4 的屏幕叫作 Retina 显示屏，640 x 960 = 1154 像素除以3.5英寸，为330ppi（官方数据为326ppi）。像素高于 300ppi 时，人眼基本无法分辨单个像素，因此，iPhone 4 屏幕称为 Retina 屏（视网膜屏）。
真实像素数量与尺寸可以动过屏幕的scale进行换算，下面表格中的1x、2x就是屏幕的scale，2x 就代表1个点等于2个像素。而在代码中，我们获取屏幕的尺寸是与下表中的第二列一样的，两种设备相同：
点作为基本单位，及屏幕模式
点的概念（point）：iOS 开发过程中 iPhone 4 屏幕尺寸继续保持320 x 480，不过单位并非像素，而是点。在iPhone 3GS中，1个点等于1个像素，在iPhone 4中，1个点等于2个像素。iPhone 4 和 iPhone 3GS 的屏幕尺寸都是3.5英寸，但是 iPhone 4 在单位英寸上像素更多，也就看起来更细腻。（像素可以想象成屏幕上真正用来显示颜色的发光小点）
以点为单位在开发过程中处理视图尺寸，有效屏蔽了设备间不同像素屏幕带来的布局上的差异，可以完美兼容之前的程序。
2. 关于切图中的2x、3x
-
矢量图：也称为面向对象的图像或绘图图像，在数学上定义为一系列由线连接的点。根据几何特性来绘制图形，矢量可以是一个点或一条线，矢量图只能靠软件生成，文件占用内在空间较小，因为这种类型的图像文件包含独立的分离图像，可以自由无限制的重新组合。
-
位图：是由称作像素（图片元素）的单个点组成的，点可以进行不同的排列和染色以构成图样。扩大位图尺寸的效果是增大单个像素，从而使线条和形状显得参差不齐。
文字、颜色等是矢量数据，放大是不会失真的，因此，文字、颜色等在各个机型上使用都可以清晰显示。而图片并非矢量数据，处理方式有所不同。假设图片 example.png，大小为 30 x 40像素（这里的单位是像素，数字图片的单位通常都为像素）。当这张example.png在iPhone 3GS和iPhone 4中使用时候，都占据屏幕上30 x 40个点。而因为iPhone 4中1个点等于2个像素，也就是30 x 40像素的图片，占据了60 x 80像素的屏幕，因此这图片在iPhone 4中看起来就会模糊。
图片也有1x、2x模式，开发的时需要进行图片与屏幕的适配，使不同scale的图片各就其位，才能得到更晰的显示效果。这时需要准备两张不同scale的图片放在同一目录下：
example.png // 30 x 40像素
example@2x.png // 60 x 80像素
在iPhone 6 Plus中，还出现3x模式，原理是一样的。当iPhone 4选中example@2x.png的图片，就会生成一张大小为30 x 40个点，2x模式的图片。这个时候，图片看起来就会很清晰了。而没有适配的旧程序，example@2x.png不存在，就选中example.png，生成大小为30 x 40个点，1x模式的图片，看起来比较模糊。但它们占据的屏幕点数是一样的。
3. iOS中不同scale图片的自动适配
用语句 [UIImage imageNamed:@"example"]; 来调用assert里的图片资源，系统会根据屏幕模式自动选择对应的图片。屏幕1x模式，就会选择 example.png，2x 模式就会优先选择 example@2x.png，假如 example@2x.png不存在，就选择 example.png。假如只有 example@3x.png，图片也会被加载到，但系统显示时图片会被“压缩”。
在实际工作中我们只需要切@2x和@3x两套图即可，因为1x的设备已经基本不用。
网友评论