官方资料
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在什么时候和什么设备上使用，而具体设计规范，看官方文档就知道了。
网友评论