使用css的transform来解决适配问题
2.定义内容区域
<div ref="screen" class="screen">
<div/>
1.将展示区域设置为水平垂直居中,宽高比设置1920*1080
.screen {
position: absolute;
left: 50%;
top: 50%;
width: 1920px;
height: 1080px;
}
3.编写缩放比例方法
// 定义大屏缩放比例
function getScale(w = 1920, h = 1080) {
// 得到视口宽高与定义的宽高的比例ww, hh
const ww = window.innerWidth / w
const hh = window.innerHeight / h
// 宽高比例哪个小就使用哪个
return ww < hh ? ww : hh
}
4.在页面挂载后修改内容盒子的缩放比例
onMounted(() => {
screen.value.style.transform = `scale(${getScale()}) translate(-50%, -50%)`
})
5.添加调整窗口大小事件
window.onresize = () => {
console.log(111)
screen.value.style.transform = `scale(${getScale()}) translate(-50%, -50%)`
}