vue3信息大屏适配解决

使用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%)`
}