2023-07-25 前端大屏适配

记录前端大屏适配一种方式

设计稿宽1920px，高1080px

mounted() {
  console.log('base')
    // 初始化自适应  ----在刚显示的时候就开始适配一次
  this.handleScreenAuto();
  // 绑定自适应函数   ---防止浏览器栏变化后不再适配
  window.onresize = () => this.handleScreenAuto();
},
destroyed() {
  window.onresize = null;
},
methods: {
  handleScreenAuto() {
    const designDraftWidth = 1920; //设计稿的宽度
    const designDraftHeight = 1080; //设计稿的高度
    // 根据屏幕的变化适配的比例
    const scale = document.documentElement.clientWidth / document.documentElement.clientHeight < designDraftWidth / designDraftHeight 
            ? document.documentElement.clientWidth / designDraftWidth
            : document.documentElement.clientHeight / designDraftHeight;
            // 缩放比例
            document.querySelector('.main').style.transform = `scale(${scale}) translate(-50%, -50%)`;
            return 1;
        }
   }
}

<div class="main">
内容
</div>

.main{
  width: 1920px; //设计稿的宽度
  height: 1080px; //设计稿的高度
  transform-origin: left top;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

参考：https://blog.csdn.net/Liushiliu104/article/details/129372083
https://blog.csdn.net/L1147484597/article/details/128443705