uni

您所在的位置:网站首页 苹果6相机像素设置 uni

uni

2024-07-12 00:40| 来源: 网络整理| 查看: 265

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

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)介绍完成。



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3