uniapp项目rpx和px单位转换，满足适配需求

问题：在一整个页面上设置一个背景图片，在背景图片上放一个透明盒子。在不同型号的手机上透明盒子的位置发生变化。 

问题原因：

在开发uniapp项目中我们往往用到的单位是rpx。但是用户的手机型号是不同的。如果我们直接给盒子固定的高度时。那么图上每个用户在手机上看到的界面就会发生偏差。为了让我们的界面适配每个型号的手机。那我们要怎么适配不同型号的手机呢？

主要原理：

我们需要获取到手机的可用屏幕的宽和高

uni.getWindowInfo()
​​​​​​​let a = uni.getWindowInfo();//官方获取用户设备信息的方法
            let b=a.windowWidth;//可用屏幕的宽
            let c=a.windowHeight;可用屏幕的高
            let d=750(b/c);//获取到的是通过比例转换的高度
        

解决方法：

1、将获取到的高度，赋值给最大的盒子 

html代码

<view class="background_box" ref="screen" :style="{height:sss+'rpx'}">

js代码

data() {
			return {
				sss: "",}
onLoad() {
​​​​​​​let a = uni.getWindowInfo();//官方获取用户设备信息的方法
            let b=a.windowWidth;//可用屏幕的宽
            let c=a.windowHeight;可用屏幕的高
            let d=750(b/c);//获取到的是通过比例转换的高度
	        this.sss = d;

}

2、用算出来的高度减去固定的高度就可以算出透明盒子的高度。并且在每个手机上展现出来的页面的位置不会发生变化。