关于大屏适配问题，上个文章是两边留白，还有一种方法两边不会留白，缺点是 会变形，即高度会变

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;
}