悠悠楠杉
网站页面
uniapp适配解决方法
05/23
微信小程序设计了 rpx 解决这个问题。uni-app 在 App 端、H5 端都支持了 rpx，并且可以配置不同屏幕宽度的计算方式，具体参考：rpx 计算配置。
rpx 是相对于基准宽度的单位，可以根据屏幕宽度进行自适应。uni-app 规定屏幕基准宽度 750rpx。
开发者可以通过设计稿基准宽度计算页面元素 rpx 值，设计稿 1px 与框架样式 1rpx 转换公式如下： 设计稿 1px /
设计稿基准宽度 = 框架样式 1rpx / 750rpx
举例说明：
若设计稿宽度为 750px，元素 A 在设计稿上的宽度为 100px，那么元素 A 在 uni-app
里面的宽度应该设为：750 * 100 / 750，结果为：100rpx。 若设计稿宽度为 640px，元素 A 在设计稿上的宽度为
100px，那么元素 A 在 uni-app 里面的宽度应该设为：750 * 100 / 640，结果为：117rpx。 若设计稿宽度为
375px，元素 B 在设计稿上的宽度为 200px，那么元素 B 在 uni-app 里面的宽度应该设为： 750 * 200 /
375，结果为：400rpx。
如下图设计稿宽度为1920
------根据·公式设计稿宽度 / 750 = 比率 则1920/750=2.56 计算出1920宽度设计稿所占标准750百分比------
为了方便在Hbuilder X中 点击工具>设置>语言服务配置中拉到最下面有个px转rpx,把上面计算的比率放进去
实际效果：
这样就根据自己输入的px尺寸自动转换为对应的rpx尺寸了
