IOS基础-设计UI@1X@2X@3X是什么

官方资料

苹果官网的设计规范
图片和图标尺寸相关

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

你可能感兴趣的:(IOS基础-设计UI@1X@2X@3X是什么)