vue3大屏适配

1、定义初始化比例

?

1 2 3 4 5

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

2、获取屏幕的宽高比列对象

?

1 2 3 4 5

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

3、计算之后赋值最外侧盒子宽高

?

1 2 3 4

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