vue3大屏适配

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%)";
}