- 在微信小程序中使用rpx可以解决屏幕宽度的兼容问题 但是设置高度的时候还是会有问题
为了解决宽度的兼容问题，在微信小程序中可以使用了rpx像素单位来进行设置，不管屏幕的宽度大小是多少，
都认为宽度有750rpx 这样即使屏幕大小不一样 使用了rpx单位来设置的样式比例也是一样的。
这样屏幕宽度和rpx单位的比例计算就是 : 屏幕宽度 / 750 = 1rpx与实际像素的比例
例如 ： 屏幕宽度为 375px 375 / 750 = 0.5 这时 1rpx 就等于 0.5实际像素
屏幕的宽度通过统一设置成750rpx 达到了兼容 ，但是高度并没有统一设置成某一个具体的 xxx rpx， 但是高度具有多少rpx可以根据比例大小来计算出来
例如 ： 屏幕宽度为 375px 高度为 667px 公式为 ： 屏幕高度 / ( 屏幕宽度 / 750 ) = 高度所具有的rpx
667 / ( 375 / 750 ) = 1334 通过计算可以的出高度为1334rpx
高度所具有多少rpx是根据宽度与750的比例的出来的 不同宽高的屏幕高度所对应的rpx是不同的 所以设置高度的时候也是不可以写死 容易出现高度不兼容的问题
- 在开发中，随着不同手机屏幕，高度并没有固定的rpx值
- uniapp demo 来测试不同机型的高度值
<template>
<view class="page">
</view>
</template>
<script>
export default {
data() {
return {
rpxHeight:0,
scrollTop: 0 // 初始化滚动高度为0
}
},
onLoad: function (options) {
wx.getSystemInfo({//微信api，可以获取页面的信息
success: (result) => {
console.log(result)
//拿到当前设备的宽度和高度,单位为px
let hiehgt = result.windowHeight
let width = result.windowWidth;
//px转rpx的转换比例
let rpxRatdio=750/width //750为设计稿的宽度，width为刚才获取到的页面的宽度
//将获取到的px的高度转为rpx的高度
let rpxHeight=rpxRatdio * hiehgt;
console.log('rpxheight----',rpxHeight);
this.rpxHeight = rpxHeight
},
fail: (res) => {},
complete: (res) => {},
})
},
methods: {
onPageScroll(event) {
console.log(event);
this.scrollTop = event.scrollTop // 更新页面滚动高度
}
}
}
</script>
