关于大屏适配问题，这个缺点是只有再16：9 的屏幕上会完整显示，其余左右两边预留空白部分。优点不在需要rem计算。
vue3 js版本
script 代码如下
import { onMounted, reactive } from 'vue';
const style = reactive({
width: '1920px',
height: '1080px',
transform: 'scale(1) translate(-50%, -50%)', // 默认不缩放，垂直水平居中
})
// 获取缩放比例
function getScale () {
const w = window.innerWidth / 1920;
const h = window.innerHeight / 1080;
return w < h ? w : h;
}
// 设置缩放比例
function setScale () {
style.transform = `scale(${getScale()}) translate(-50%, -50%)`
}
setScale()
// 监听窗口大小
window.addEventListener('resize', setScale)
html 代码如下
<div class="screen-adapter">
<div class="content-wrap" :style="style">
<router-view></router-view>
</div>
</div>
style 代码如下
.screen-adapter {
width: 100vw;
min-height: 100%;
max-height: 100vh;
overflow: hidden;
background-size: 100% 100%;
font-family: 'Microsoft YaHei'
}
.content-wrap {
transform-origin: 0 0;
position: absolute;
top: 50%;
left: 50%;
}
