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
