【Vue】vue2 vue3 实现 scale 缩放大屏自适应

vue3 例子 App.vue

template

<div class="screen-wrapper">
    <div class="screen" id="screen">
      <router-view />
    </div>
  </div>

script

import { onMounted } from "vue";

onMounted(() => {
  // 初始化自适应-在刚显示的时候就开始适配一次
    handleScreenAuto();
  // 绑定自适应函数-防止浏览器栏变化后不再适配(这里可做节流优化)
    window.onresize = () => handleScreenAuto();
});

// 数据大屏自适应函数
const 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("#screen") as any).style.transform = `scale(${scale}) translate(-50%)`;
};

style

.screen-wrapper {
  height: 100%;
  width: 100%;
  .screen {
    display: inline-block;
    width: 1920px; //设计稿的宽度
    height: 1080px; //设计稿的高度
    transform-origin: 0 0;
    position: absolute;
    left: 50%;
  }
}