Uniapp项目 适配不同机型大小尺寸 包括设计稿非750px

首先默认在uniapp项目中 使用1rpx  在750px宽度的屏幕下显示的是1px  在375px宽度下 显示的是0.5px

如果设计稿给的非375px或750px的时候应该怎么办？ 如下就是设计稿给了390px的一个例子

在开发uni-app项目时，设计稿给出的尺寸是390px，你可以使用rpx（响应式像素）来进行适配。uni-app默认的设计稿宽度是750px，因此你需要进行一些转换。

步骤：

1. 确认设计稿尺寸：你的设计稿宽度是390px。

2. 计算转换比例：uni-app默认设计稿宽度是750px，所以你需要将390px的设计稿转换为750px的设计稿。

3. 使用rpx进行适配：rpx是uni-app中的响应式单位，可以根据屏幕宽度自动进行缩放

实际操作：

一种操作：调整设计图  如果使用的UI软件为蓝湖，可以自定义自己使用的尺寸宽度 来进行开发

另外一种代码计算：

1. 定义一个转换函数：

function pxToRpx(px) { const designWidth = 390; const defaultWidth = 750; return (px / designWidth) * defaultWidth; }

1. 在样式中使用rpx：

假设设计稿中有一个元素宽度是100px，那么你可以这样转换：

<view style="width: {{pxToRpx(100)}}rpx;"></view>

1. 在CSS中使用rpx：

如果你直接在CSS中使用，可以手动计算：

设计稿中100px：

[ \text{rpx} = \left( \frac{100}{390} \right) \times 750 = 192.31 ]

.my-element { width: 192.31rpx; }

示例：

假设设计稿中有一个按钮，宽度是100px，高度是50px，字体大小是16px。

1. 计算转换后的rpx：

• 宽度：[ \left( \frac{100}{390} \right) \times 750 = 192.31 ]
• 高度：[ \left( \frac{50}{390} \right) \times 750 = 96.15 ]
• 字体大小：[ \left( \frac{16}{390} \right) \times 750 = 30.77 ]

1. 在CSS中使用：

.button { width: 192.31rpx; height: 96.15rpx; font-size: 30.77rpx; }

总结：

通过将设计稿中的px值转换为rpx值，你可以确保你的应用在不同屏幕尺寸上都能正确显示。使用上述方法，你可以根据设计稿的尺寸进行相应的转换，从而实现适配。