uniapp适配问题(uniapp怎么做适配)

uniapp适配问题

推荐整理分享uniapp适配问题(uniapp怎么做适配)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:uniapp布局如何适配,uniapp如何适配,uniapp适配移动端,uniapp适配移动端,uniapp兼容问题,uniapp布局如何适配,uniapp适配移动端,uniapp 适配,内容如对您有帮助，希望把文章链接给更多的朋友！

原文链接：https://blog.csdn.net/weixin_52312684/article/details/125218453

一.计算公式

设计稿 1px / 设计稿基准宽度 = 框架样式 1rpx / 750rpx

换言之，页面元素宽度在 uni-app 中的宽度计算公式：

750 * 元素在设计稿中的宽度 / 设计稿基准宽度

举例说明：

 - 若设计稿宽度为 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。  

二.宽度750px设计稿

更具上面的换算公式

750 * 元素在设计稿中的宽度 / 设计稿基准宽度=100rpx

设计图是100px转换成为100rpx 

结论:

1px=1rpx

验证:

<template><view class="box"><view class="box1"></view></view></template><script>export default {}</script><style>.box{width: 750rpx;height: 1000rpx;background-color: pink;}.box1{width: 100rpx;height: 100rpx;background-color: blue;}</style>

在大屏下:

盒子的大小由100x100变成50x50

说明：

在大屏下 1px=2rpx

得出结论:

 rpx能够自适应屏幕的大小 从而概念元素的尺寸。

实际开发的时候可以直接在手机模式下进行开发 

二.宽度640px设计稿

先换算一下：

750x100/640=117rpx

设计稿:100:117

1:1.17

也就是说1px等于1.17rpx

100rpx/1.17=85.47

通常情况下我们一般以750px作为标准来进行开发。

三.扩展

移动端是如何做适配的呢？

1.百分比   2.rem

这里我们重点说rem

假设设计稿为980px  如何做适配

rem是一个单位它相对于当前屏幕的大小而言的。

通常用flexbox.js 这个插件来将屏幕划分成10份。

980/10=98px

也就是1rem等于98px。

代码：

<template> <div class="box"> </div></template><script>export default { name: '', methods: { }}</script><style scoped>.box{ width: 1rem; height: 1rem; background-color: pink;}</style>

四.思考设计稿999px，在789px做适配转换成rem

设计稿为999px。

在手机为789px做适配。

设计稿的1rem 为 99.9px。

手机的1rem为78.9px。

得出结论:

设计稿的1px等于:78.9px/99.9px=0.789

就可以按照设计稿上的1px 等于手机上0.789px来画图了

或者用另外一种算法: