App的设计图根据是否可以滚动分成两种设计图，下面我们说说这个不可以滚动的设计，怎么在各种不同尺寸的设备中适配。

image.png

这是以iPhone8的尺寸(750*1334)做的效果图。

类似这种页面，就是不可滚动的效果图。

我们按照标注，在xib或者storyboard用autolayout布局；

为了展示效果图，在布局文件底部添加了一个正方形，居中显示

image.png

image.png

image.png

image.png

image.png

同样的布局文件，因为我们的标注是基于iPhone8的尺寸，结果只有iPhone8的显示效果图是满意的，其他设备的的效果图都无法接受。

设备

宽/缩放比

高/缩放比

效果图

750

1334

iPhone4s

640/0.85

960/ 0.72

iPhone5

640/0.85

1136/0.85

iPhone8

750/1.0

1334/1.0

iPhone8 Plus

1242/1.66

2208/1.66

iPhoneX

1125/1.5

2436/1.82

在ios的布局方式中，有一种自动布局叫做Autoresizing。

说明：这种布局方式不能与autolayout同时使用。

image.png

image.png

image.png

image.png

image.png

在不同设备上的效果，总体感觉还是可以，即使在最小的iPhone4s，也是可以显示完整的；但是，红色的正方形控件，在iPhone4s、iPhoneX上面变形了，如果这个正方形是ImageView的话，显示出来的图片也会变形了，这个肯定是不合格的。

但在Autoresizing这种布局上，没办法去处理这个问题。

设备

宽/缩放比

高/缩放比

效果图

750

1334

iPhone4s

640/0.85

960/ 0.72

iPhone5

640/0.85

1136/0.85

iPhone8

750/1.0

1334/1.0

iPhone8 Plus

1242/1.66

2208/1.66

iPhoneX

1125/1.5

2436/1.82

根据上图，各个设备的屏幕宽高与效果图的宽高的缩放比例是不同，只有iPhone8 Plus是近似相同。这就造成了上面的正方形控件变形的原因。

除此之外，我们还能怎么做呢。

image.png

- (void)viewDidLoad {

[super viewDidLoad];

CGRect rect = [UIScreen mainScreen].bounds;

float x = rect.size.width / 375;

float y = rect.size.height / 667;

NSLog(@"screen rect === %@",NSStringFromCGRect(rect));

NSLog(@"y==%@",@(y));

NSLog(@"x==%@",@(x));

// CGRect rect = [UIScreen mainScreen].nativeBounds;

// float x = rect.size.width / 750;

// float y = rect.size.height / 1334;

// NSLog(@"screen rect === %@",NSStringFromCGRect(rect));

// NSLog(@"y==%@",@(y));

// NSLog(@"x==%@",@(x));

//保证宽高的缩放比一致，才不会出现正方形控件变形的情况。

//取缩放比小的那个，才不会出现界面超出屏幕

if(x > y){

self.view.transform = CGAffineTransformMakeScale(y, y);

}else{

self.view.transform = CGAffineTransformMakeScale(x, x);

}

}

代码已经上传了 DEMO

补充

在xib或者storyboard用百分比布局

1.控件宽高的百分比

image.png

image.png

控件的宽高百分比这个简单

1).设置控件自身的宽高比；

2).设置控件的宽度等于父View的宽度，再设置Multiplier的比值(控件宽度:父View的宽度)

这样控件会随着屏幕的大小而缩放，控件自身也有宽高比，不会发生变形。

2.控件宽高的百分比

image.png

两个红色的控件，

第一个是距离左边距37.5的距离；在不同屏幕，这个值是固定的。

第二个是距离父View中线X坐标的0.2倍；在不同屏幕，这个值是变化的。

计算公式(iPhone8)：375(屏幕宽)0.5(中线X坐标)0.2(系数)=37.5。

第一个控件：固定左边距

image.png

第二个控件：百分比左边距

image.png

跟第一个控件的用法，主要区别是

SecondItem:SuperView.Center.X;

Constant:0(固定值)

Multiplier:0.2(比例)

这样可以在不同的屏幕中，对比看到两个控件实际左边距的差别。

代码已经上传了 DEMO