根据项目宽高大小自适应像素项目

	const getWidth = (e) => {
		return `${width.value * e / 1920}px` // 设备的宽度大小 * 原型图的元素宽度 / 原型图固定宽度
	}
	const getHeight = (e) => {
		return `${height.value * e / 1080}px` // 设备的宽度大小 * 原型图的元素宽度 / 原型图固定宽度
	}

例如我项目要适配不同机型,例如机型是375 * 667,设计图尺寸为1920 * 1080,某个元素在设计图宽高为40 * 40,那么上面的代码就是下面格式

	const getWidth = (e) => {
		return `${375 * e / 1920}px` 
	}
	const getHeight = (e) => {
		return `${667 * e / 1080}px` 
	}

    <!-- 元素在该设备中实际像素为: -->
    <div :style="{width:getWidth(40),height:getHeight(40)}"></div>

上面代码可以在适应的场景使用,上述代码原理就是例如设备的宽/设计图的宽的比例算出来转换成对应的设备的像素做成了一个宽高自适应

例如在RN项目里面只能获取到设备宽高,没有其他单位作参考,如果要根据设计图自适应,可以使用这种方法(之前有点笨了,是看着设计图一点一点调整的)

例如我在用uniapp或者vue做一个横屏app的场景,要求全屏自适应,那我这时候也要动态改变高度,因此要转换一下设计图的宽高比例,使用到了以上方法

如果只考虑宽度不考虑高度或者只考虑高度不考虑宽度的情况下,直接使用rem或者rpx即可,不需要使用上述方法

例如uniapp/微信小程序/vue/...等等前端框架,使用rem或者rpx也是满足了大部分场景,就不需要使用上述场景做转换了