一、歷代iPhone的尺寸

iPhone4  640, 960
iPhone5  640, 1136
iPhone6  750, 1334
iPhone6P 1242, 2208
iPhoneX  1125, 2436

二、iPhone X有何不同

    1.使用3x 圖，與iphone7寬度一樣，比iPhone7高
    2.狀態欄高度是44（比iphone7高24），title欄高度是44（一樣），大字標題largetitle高度是52（可不設置），底部多了一個34的高度（小橫桿欄）

三、如何讓iPhone X頂天立地（鋪滿全屏）

圖中，上半部是直接在iPhone X上跑的效果，下半部是適配iPhone X之后的效果，適配的方法很簡單---多加一張iPhone X的啟動圖就行了,尺寸為1125*2436

啟動.png

配置.png

四、高度的全局純代碼適配

  按照屏幕的寬度和高度不同，是有一個比例的，一般設計師只按某一款iPhone 出圖，我一般是讓出iphone6的圖，寬度和高度自己調節，在設置寬度方面我用的宏是：
#define BYW ([UIScreen mainScreen].bounds.size.width/375)

高度方面，因為iPhone X之前的幾款機型狀態欄、導航欄和tabBar的高度在不同機型上都是一樣的，所以可以根據頁面有哪些元素寫幾套自己常用的布局自己計算，以下是按有狀態欄和導航欄，無tabBar來做的示例：
- (CGFloat)getSNhight:(CGFloat )H{
    float status_H = 20;//狀態欄
    float navBar_H = 44;//導航欄
    if (iPhoneX) {
        H = H * ((812 - 44 - navBar_H)/(667 - 44 - navBar_H));//iPhone X的狀態欄高度是44
    }else if (iPhone6P) {
        H = H * ((736 - status_H - navBar_H)/(667 - status_H - navBar_H));
    }else if (iPhone6){
        H = H;
    }else if (iPhone5){
        H = H * ((568 - status_H - navBar_H)/(667 - status_H - navBar_H));
    }else if (iPhone4){
        H = H * ((480 - status_H - navBar_H)/(667 - status_H - navBar_H));
    }else{
        H = H * 1.2;
    }
    return H;
}
用法的示例代碼：
    [_phoneNumView mas_makeConstraints:^(MASConstraintMaker *make) {//手機號
        make.left.equalTo(ws.mas_left).offset(30*BYW);
        make.width.offset(KScreenWidth - 60*BYW);
        make.height.offset([[BYFrames shareFrames]getSNhight:44]);
        make.top.equalTo(ws.logoImgView.mas_bottom).offset([[BYFrames shareFrames]getSNhight:50]);
    }];

BTW:
  機型判斷參考：（手機屏幕的尺寸）
  #define iPhoneX ([UIScreen instancesRespondToSelector:@selector(currentMode)] ? CGSizeEqualToSize(CGSizeMake(1125, 2436), [[UIScreen mainScreen] currentMode].size) : NO)

五、具體頁面的設置

    1.masonry布局
        更新到最新版本的masonry,使用SafeArea布局
        在控制器中，當view添加到控制器的View上時，top和bottom 需要采用safeArea布局，宏代碼為：
        #define edgesView(fView)\
                  if (@available(iOS 11.0, *)) {\
                  make.left.width.equalTo(fView);\
                  make.top.equalTo(fView.mas_safeAreaLayoutGuideTop);\
                  make.bottom.equalTo(fView.mas_safeAreaLayoutGuideBottom);\
                }else{\
                  make.edges.equalTo(fView);\
                }
          修改前后的代碼及效果示例：

Snip20180102_109.png