点赞评论，感觉有用的朋友可以关注笔者公众号 iOS 成长指北，持续更新
欢迎与笔者讨论，无论是知识点叙述有误还是笔者论述问题
笔者最近正在编写一篇关于 Swift 的入门教程，不能免俗的写一些具体使用的案例，本文总结一些关于 iOS 开发或设计过程中，你需要的知道的一些分辨率的知识点，这些知识点从开发程序开始会一直伴随着你。
如果你的 UI 设计师不专业或者基于 Sketch 等软件设计一些自己的东西，了解这些是十分必要的。
学习目标
本文旨在解决以下几个问题：
- 区分点（Points）和像素（Pixels）
- 如何使用1倍图（1x），2倍图（2x）和3倍图（3x）以及如何给文件命名（
@2x和@3x） - 如何简单的在不同分辨率的情况下进行开发和设计
点（Points）和像素（Pixels）
不同型号的 iPhone 有着不同的屏幕尺寸和像素密度。像素密度是指有多少像素被挤进一个物理空间（通常指的是1英寸）。
像素是我们在数字显示器上可以控制的最小的物理元素。在特定的屏幕尺寸中，像素越多，**PPI（pixels-per-inch——每英寸像素数）**就越高，呈现的内容就越清晰。
从 2010 年开始，苹果推出了其第一款 Retina 屏幕的手机，在同等尺寸的物理设备上，图像比以往显得更加清晰。用户界面的物理尺寸没有变换但是像素尺寸翻了一倍。第一款 iPhone 6 Plus 开始，我们进入了Retina HD 的屏幕时代，同等物理尺寸下我们需要更大的像素尺寸。
作为应用开发人员和设计人员，我们需要考虑不同的屏幕尺寸和像素密度。为了在各种不同分辨率的情况下使我们的图像达到最好的显示效果，我们需要为显示的图像提供多个不同像素的图片。
归功于以下两个知识点，对 iOS 开发者来说，让布局和使用图片变得更加简单。
- 点（Point）：点是与分辨率无关的度量。它会根据屏幕像素密度，一个点可以包含多个像素。当我们在实际开发过程中，我们使用点来确定我们的 UI 而不是使用像素（Pixels）。我们简单将一个点理解为在不同屏幕手机上的 1x1，2x2 和 3x3 的像素栅格——当然这个值不全对。这类似于 Android 上 dips（density independent pixels —— 密度无关像素 ）。也就是所谓的 1 dp，在 iOS 开发中我们理解为 1 pt。
- @2x, @3x：当你需要在不同屏幕上显示更加精细的图片是，你需要提供不同尺寸的图片。这也就倍图的由来。当应用程序在高 PPI 的 iPhone 上运行时，iOS 将自动选择这些文件。
1x，2x 和 3x 的图像缩放
下图的示例论述了具有不同像素密度的同一幅图像的示例。
当我们在 iOS 开发过程中，应对不同的 PPI 值的 iPhone 我们一般只需要使用上述三张倍图——实际上一般来说我们几乎看不到需要使用 1 倍图的设备了。
如果要设计一个黑色点图时，只需将 UIImageView 或 Image view 的尺寸设置为 10×10——这是一个不需要极度细致的设计方式，不同分辨率情况下的视图应该展现不同的大小，但这样要求极高。
下表展示了不同 iPhone 设备的 PPI
| 设备 | 倍图 | Points | Rendered Pixels | Physical Pixels | Physical Device（PPI） |
|---|---|---|---|---|---|
| iPhone 12 Pro Max | @3x | 428 x 926 | 1284 x 2778 | 6.7″，458ppi | |
| iPhone 12,iPhone 12 Pro | @3x | 390 x 844 | 1170 x 2532 | 6.1″，458ppi | |
| iPhone 12 mini | @3x | 375 x 812 | 1080 x 2340 | 5.4″，476ppi | |
| iPhone 11 Pro Max,iPhone XS Max | @3x | 414 × 896 | 1242 x 2688 | 6.5″，458ppi | |
| iPhone 11, iPhone XR | @2x | 414 × 896 | 828 x 1792 | 6.1″，326ppi | |
| iPhone 11 Pro, iPhone X, XS | @3x | 375 x 812 | 1125 x 2436 | 5.8″，458ppi | |
| iPhone 6+, 6S+, 7+, 8+ | @3x | 414 × 736 | 1142 x 2208 | 1080 x 1920 | 5.8″，401ppi |
| iPhone 6, 6S, 7, 8 | @2x | 375 x 667 | 750 x 1334 | 5.5″，326ppi | |
| iPhone 5, 5s, 5c, SE | @2x | 320 x 568 | 640 x 1136 | 4.7″，326ppi | |
| iPhone 4, 4S | @2x | 320 x 480 | 640 x 960 | 4.0″，326ppi | |
| iPhone 2G, 3G, 3GS | @1x | 320 x 480 | 320 x 480 | 3.5″，163ppi |
- Points： 坐标都是以点为抽象单位指定的，它们只在这个数学坐标空间中才有意义。
- Rendered Pixels：基于点的图形渲染为像素。这个过程称为光栅化。点坐标乘以比例因子得到像素坐标。比例因子越高，细节层次越高
- Physical Pixels：设备屏幕的像素分辨率可能低于上一步中呈现的图像。在图像可以显示之前，它必须向下采样(调整大小)到更低的像素分辨率
- Physical Device：计算出的像素显示在物理屏幕上。PPI 值告诉你一英寸有多少像素，从而在现实世界中像素出现的大小
注意
渲染像素和物理像素在所有 iOS 设备上都是相等的，只有一个例外：iPhone 6、7、8 Plus和iPhone X、XS和XS Max的Retina HD屏幕。因为其屏幕的像素分辨率低于自然的 @3x 分辨率，对于常规 Plus 型号，渲染内容的大小自动调整为原始大小的 87%（从1242 x 2208像素调整为适合1080 x 1920 像素的显示分辨率）。
另一个值得注意的点是，哪怕同等屏幕大小，在不同时代也不一样：
- iPhone 4 英寸屏幕：320 x 568 pt
- iPhone 4.7 英寸屏幕：375 x 667 pt
- iPhone 5.5 英寸屏幕：414 x 736 pt
- iPhone 6.1英寸屏幕 （2018–2019）& 6.5英寸屏幕：414pt x 896 pt
- iPhone 5.4 英寸屏幕（2020） & 5.8英寸屏幕： 375 x 812 pt
- iPhone 6.1 英寸屏幕（2020）：390 x 844 pt
- iPhone 6.7 英寸屏幕（2020）:：428 x 926 pt
开发实战
实际开发过程中我们如何处理关于屏幕尺寸和图片缩放呢？
作为一名 iOS 开发者，理解缩放、屏幕分辨率、每英寸像素以及 @2x 和 @3x 文件名约定的概念非常重要。现在的蓝湖、Sketch 等常见的 UI 使用的工具都自带导出全部的倍图文件。
如果你的工程允许，当然也可以直接使用矢量格式文件。Xcode 12 及以后的版本支持 SVG——这是矢量图形（如图标、插图和图形）的标准格式。
应用程序用户界面中图像（或 UI 元素）的大小由 Auto Layout（或 SwiftUI）控制。例如，使用
自动布局，可以相对于屏幕边缘定位图像。当然，这不受屏幕 PPI 的影响，因为自动布局的点也会被放大或缩小。
参考
The Ultimate Guide to iPhone Resolutions paintcode）
The iOS Design Guidelines (Ivo Mynttinen)
The iOS Design Guidelines (Ivo Mynttinen)
Pixel Density, Demystified (Peter Nowell)——可以关注一下这位作者尤其是使用 Sketch 工具的读者
感谢你阅读本文！ 🚀
