vue项目 - 封装页面自适应大小，解决横竖屏切换布局错乱的问题

需求： 移动端或者h5端项目，要兼容各个手机的大小，包括说手机横竖屏时页面大小展示的问题，

原理：
监听窗口变化，根据计算属性，重新获取屏幕宽度值，$pxAuto（web显示宽度像素/设计稿宽度，得到1设计稿像素是多少web宽度像素，再*设计稿的值， 等于 自适应尺寸）

解决：

<div :style="{top:`{$pxAuto(603)}}px`,'font-size':`${$pxAuto(17)}px`}"> </div>
data(){
	return {
		pageWidth:window.innerWidth,
		limitPageWidth:window.innerWidth
	}
},
computed:{
	$pxAuto(){
		return(value,maxWidth=540,standarWidth=375)=>{
			let pageWidth =this.pageWidth< maxWidth ? this.pageWidth : maxWidth
			this.limitPageWidth = pageWidth 
			return value / standarWidth* pageWidth 
		}
	}
},
mounted(){
	window.addEventListener("resize",()=> {
	 	this.pageWidth =window.innerWidth
	})
}