机型 | 屏幕宽高(point) | 渲染像素(pixel) | 物理像素(pixel) | 屏幕对角线长度(英寸) | 屏幕模式 |
---|---|---|---|---|---|
Phone 5,5s,5c,se | 320 * 568 | 640 * 1136 | 640 * 1136 | 4(326 PPI) | 2x |
Phone 6,6s,7,8 | 375 × 667 | 750 * 1334 | 750 * 1334 | 4.7(326PPI) | 2x |
Phone 6p,6sp,7p,8p | 414 * 736 | 1242 * 2208 | 1080 * 1920 | 5.5(401PPI) | 3x |
Phone X,Xs,11Pro | 375 * 812 | 1125*2436 | 1125*2436 | 5.8(458PPI) | 3x |
Phone 11,Xr | 414*896 | 828*1792 | 828*1792 | 6.1(326PPI) | 2x |
Phone 11Pro Max,Xs Max | 414*896 | 1242 *2688 | 1242 *2688 | 6.5(458PPI) | 3x |
iPad 4,5,Air,Air2,mini3,mini4 | 1024×768 | 2048×1536 | 2048×1536 | 9.7(264ppi) | 2x |
iPad Pro | 1366*1024 | 2732×2048 | 2732×2048 | 12.9(264ppi) | 2x |
屏幕模式(1x, 2x, 3x):描述的就是屏幕中一个点有多少个 Rendered Pixels 渲染,对于2倍屏(又称 Retina 显示屏),会有 2 * 2 = 4 个像素的面积渲染,对于3倍屏(又称 Retina HD 显示屏),会有 3 * 3 = 9 个像素的面积渲染
iOS 开发中,所有控件的坐标以及控件大小都是以点为单位的,假如我在屏幕上需要展示一张 20 * 20 (单位:point)大小的图片,那么设计师应该怎么给我图呢?
这里就会用到屏幕模式的概念,如果屏幕是 2x,那么就需要提供 40 * 40 (单位: pixel)大小的图片,如果屏幕是 3x,那么就提供 60 * 60 大小的图片,且图片的命名需要遵守以下规范:
Standard:<device_modifier>.<filename_extension> High resolution:@2x<device_modifier>.<filename_extension> High HD resolution:@3x<device_modifier>.<filename_extension>
ImageName: 图片名字,根据场景命名 device_modifier: 可选,可以是 ~ipad 或者 ~iphone, 当需要为 iPad 和 iPhone 分别指定一套图时需要加上此字段 filename_extension: 图片后缀名,iOS中使用 png 图片
例如: MyImage@2x.png - 2x 显示屏自动加载的图片版本 MyImage@3x.png - 3x 显示屏自动加载的图片版本 MyImage@2x~iphone.png - 2x iPhone 和 iPod touch 显示屏自动加载的图片版本 MyImage@3x~iphone.png - 3x iPhone and iPod 显示屏自动加载的图片版本
一个基本思路是: 选择一种尺寸作为设计和开发基准 定义一套适配规则,自动适配剩下两种尺寸 特殊适配效果给出设计效果
这个问题很早之前在知乎上已经被讨论,附上链接:手机淘宝设计师pigtwo的回答
多屏适配.jpg
控件弹性指的是,navigation、cell、bar等适配过程中垂直方向上高度不变;水平方向宽度变化时,通过调整元素间距或元素右对齐的方式实现自适应。这样屏幕越大,在垂直方向上可以显示更多内容,发挥大屏幕的优势