uni-app 对照设计稿还原不同屏幕像素适配（iPhone X）

最近项目中需要高频度使用单位像素换算，以适配不同屏幕大小的需求，这里我以蓝湖为例，下面我给出换算步骤：

1、把蓝湖设计稿选到 ios 端，这时候页面单位变成了pt，因为我们iPhone X的屏幕和这个设计稿的宽度一样是375px（我们这里对照的真机也是iPhone X），所以这里我们可以看做 1pt = 1px = 2rpx，图示如下：

2、如果是需要随着屏幕宽度不同而随之改变的，我们使用rpx进行css样式计算，遵循 1pt = 2rpx 的计算公式，这里我们需要加上安全区域（不同手机的安全区域不同，uniapp有标准常量可以取到），代码如下：

.items {
   width: 670rpx;
   height: 620rpx;
   margin-top: 114rpx;
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
   align-items: center;
}

3、如果是不需要随着屏幕宽度不同变化的使用px进行计算，比如距离上下屏边缘的物体，我们遵循 1pt = 1px 进行计算（我们用px的原因是，这个固定物体距离边缘的距离不随着屏幕宽度的改变，而px是不会重新计算的单位，也就是是一个绝对单位），同时我们也需要加上距离屏幕边缘的安全距离才可以，下方按钮距离屏幕下方安全距离是 16px（1pt = 1px），图示如下：

所以我们在uniapp中计算绝对距离的时候，代码如下：

.start-button {
    position: fixed;
    bottom: calc(16px + env(safe-area-inset-bottom));
}

到此uni-app 对照设计稿还原不同屏幕像素适配（iPhone X）介绍完成。