vue3大屏適配

热心市民宗某§發表於2024-04-24
Vue

1、定義初始化比例

let style = ref({  //定義預設比例
  width: 1920,
  height: 1080,
  transform: "scaleY(1) scaleX(1) translate(-50%, -50%)"
})

2、獲取螢幕的寬高比列物件

let getScale = () => {  //獲取螢幕的寬高比列
   const w = window.innerWidth / style.value.width;
   const h = window.innerHeight / style.value.height;
   return {x:w,y:h};
}

3、計算之後賦值最外側盒子寬高

let setScale = () => {  //按照比列設定外部盒子的寬高
   let scale = getScale();
   style.value.transform = "scaleY(" + scale.y + ") scaleX(" + scale.x + ") translate(-50%, -50%)";
}

相關文章