位置: IT常识 - 正文
uniapp适配问题(uniapp怎么做适配)
编辑：rootadmin推荐整理分享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来画图了
或者用另外一种算法:
上一篇：idea为web项目添加tomcat并配置Artifacts(idea添加web项目)
下一篇：伫立枝头的旅鸫鸟，加拿大 (© marcophotos/Getty Images)