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

清疚 2022-10-10 01:34 426阅读 0赞

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE5NzM0NTk3_size_16_color_FFFFFF_t_70][]

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），图示如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE5NzM0NTk3_size_16_color_FFFFFF_t_70 1][]

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

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

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE5NzM0NTk3_size_16_color_FFFFFF_t_70]: /images/20221005/3fbdb782da1c4f3eb13717c392a0bea3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE5NzM0NTk3_size_16_color_FFFFFF_t_70 1]: /images/20221005/edfc4d48841d437e8a7d45197d14eaeb.png