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

王小王和他的小伙伴

已于 2023-03-23 15:47:06 修改

阅读量1.6k

点赞数

分类专栏： vue2 vue3 通用项目文章标签： vue.js javascript 前端

于 2022-06-14 00:07:49 首次发布

本文链接：https://blog.csdn.net/weixin_55042716/article/details/125269702

版权

vue2 vue3 通用项目专栏收录该内容

27 篇文章 0 订阅

订阅专栏

需求： 移动端或者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
	})
}