关于大屏适配问题，上个文章是两边留白，还有一种方法两边不会留白，缺点是 会变形，即高度会变
vue3 js版本
script 代码如下
import { onMounted} from 'vue';
function setScale () {
const cliWidth = window.innerWidth / 1920;
const cliHeight = window.innerHeight / 1080;
const screenDom = document.querySelector('#content-wrap');
screenDom.style.transform = `scale(${cliWidth},${cliHeight})`
screenDom.style.transformOrigin = 'left top';
}
onMounted(() => {
setScale()
// 监听窗口大小
window.addEventListener('resize', setScale)
})
html 代码版本如下
<div class="screen-adapter">
<div class="content-wrap" id="content-wrap">
<router-view></router-view>
</div>
</div>
css 代码如下
.screen-adapter {
width: 100vw;
max-height: 100vh;
overflow: hidden;
background: url("./assets/images/background.png") no-repeat;
background-size: 100% 100%;
font-family: "Microsoft YaHei";
}
.content-wrap {
width: 1920px;
height: 1080px;
/* background: #0d1d37; */
background-size: cover;
user-select: none;
}
