uniapp适配问题

原创已于 2022-07-06 00:00:43 修改 · 1.1w 阅读

25 ·

CC 4.0 BY-SA版权

文章标签：

#前端

于 2022-07-05 23:43:03 首次发布

uni-app 专栏收录该内容

17 篇文章

订阅专栏

原文链接：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>