官方資料
Supply high-resolution images for all artwork in your app, for all devices your app supports. Depending on the device, you accomplish this by multiplying the number of pixels in each image by a specific scale factor. A standard resolution image has a scale factor of 1.0 and is referred to as an @1x image. High resolution images have a scale factor of 2.0 or 3.0 and are referred to as @2x and @3x images. Suppose you have a standard resolution @1x image that’s 100px × 100px, for example. The @2x version of this image would be 200px × 200px. The @3x version would be 300px × 300px.
| Device | Scale factor |
|---|---|
| iPhone X, iPhone 8 Plus, iPhone 7 Plus, and iPhone 6s Plus | @3x |
| All other high-resolution iOS devices | @2x |
從官網的資料我們可以看出，@1X@2X@3X是蘋果ios開發不同解析度的裝置統一為一個尺寸而標記的，數字1、2、3表示解析度的倍數。
iPhone各種螢幕解析度
| 裝置 | 螢幕尺寸 | 解析度（pt） | Reader | 解析度（px） | 渲染後 | PPI |
|---|---|---|---|---|---|---|
| iPhone 3GS | 3.5吋 | 320x480 | @1x | 320x480 | 163 | |
| iPhone 4/4s | 3.5吋 | 320x480 | @2x | 640x960 | 330 | |
| iPhone 5/5s/5c | 4.0吋 | 320x568 | @2x | 640x1136 | 326 | |
| iPhone 6 | 4.7吋 | 375x667 | @2x | 750x1334 | 326 | |
| iPhone 6Plus | 5.5吋 | 414x736 | @3x | 1242x2208 | 1080x1920 | 401 |
| iPhone 6s | 4.7吋 | 375x667 | @2x | 750x1334 | 326 | |
| iPhone 6Plus | 5.5吋 | 414x736 | @3x | 1242x2208 | 1080x1920 | 401 |
| iPhone 7 | 4.7吋 | 375x667 | @2x | 750x1334 | 326 | |
| iPhone 7Plus | 5.5吋 | 414x736 | @3x | 1242x2208 | 1080x1920 | 401 |
| iPhone 8 | 4.7吋 | 375x667 | @2x | 750x1334 | 326 | |
| iPhone 8Plus | 5.5吋 | 414x736 | @3x | 1242x2208 | 1080x1920 | 401 |
| iPhone X | 5.8吋 | 375x812 | @3x | 1125x2436 | 458 |
UI圖片資源示例
以上做了一些簡單的說明，明白了我們標題中，@1X@2X@3X在什麼時候和什麼裝置上使用，而具體設計規範，看官方文件就知道了。