vue3 前端大屏项目适配方法

1 scale()方法

// 样式部分
.contain {
width: 100vw;
height: 200vh;
background: url(.pic);
backgrouns-size:cover
}
.screen {
display: inline-block;
width: 1920px; //设计稿的宽度
height: 1080px; //设计稿的高度
transform-origin: left top; // 缩放的基点
position: fixed; // 让屏幕呈现在中心点，然后再translate 回去
left: 50%;
top: 50%;
}

**js 部分 **
import ref from "vue"
let screen = ref() // 获取数据大屏的内容盒子DOM元素
mounted ( () => {
screen.value.style.transform = scale(${ getScale()} tranalate(-50%, -50%))
})

// 定义大屏幕缩放比列
function getScale(w= 1920, h =1080) {
const ww = window.innnerWidth /w
const hh = window.innerHeight / h
retuen ww < hh ? ww : hh
}

// 监听视口变化
window.onresize = () =>{
screen.value.style.transform = scale(${ getScale()} tranalate(-50%, -50%))
}