PC端适配方案

一、使用rem+font-size适配方案（不推荐）

vsCode安装扩展：px to rem & vw(cssrem)

二、使用vw、vh适配方案（不推荐）

vsCode安装扩展：px to rem & vw(cssrem)

三、使用scale适配方案（推荐）

存在白边

import { onMounted, onUnmounted } from "vue";
import _ from "lodash";

interface IOption {
  targetX?: number;
  targetY?: number;
  targetRatio?: number;
}

export default function useScalePage(option: IOption = {}) {
  let resizeChange = _.throttle(function () {
    triggerScale();
  }, 100);

  onMounted(function () {
    triggerScale();
    window.addEventListener("resize", resizeChange);
  });

  onUnmounted(function () {
    console.log("useScale onUnmounted");
    window.removeEventListener("resize", resizeChange);
  });

  function triggerScale() {
    let targetX = option.targetX || 1920;
    let targetY = option.targetY || 1680;
    let targetRatio = option.targetRatio || 16 / 9;

    // 1.拿到当前屏幕的宽高
    let currentX =
      document.documentElement.clientWidth || document.body.clientWidth;
    let currentY =
      document.documentElement.clientHeight || document.body.clientHeight;

    // 2.计算缩放的比例
    let scaleRatio = currentX / targetX;

    // 当前的屏幕宽高比
    let currentRatio = currentX / currentY;
    if (currentRatio > targetRatio) {
      scaleRatio = currentY / targetY;
      // 3.设置缩放( 类似图片放大 )
      document.body.setAttribute(
        "style",
        `width:${targetX}px;height:${targetY}px;transform: scale(${scaleRatio})  translateX(-50%); left:50%`
      );
    } else {
      // 3.设置缩放( 类似图片放大 )
      document.body.setAttribute(
        "style",
        `width:${targetX}px;height:${targetY}px;transform: scale(${scaleRatio})`
      );
    }
  }
}

scale无白边

import { onMounted, onUnmounted } from "vue";
import _ from "lodash";

export default function useScalePage(option = {}) {
    let resizeChange = _.throttle(function () {
        triggerScale();
    }, 100);

    function triggerScale() {
        const targetX = option.targetX || 1920;
        const targetY = option.targetY || 1080;
        
        const ratioX = window.innerWidth / targetX;
        const ratioY = window.innerHeight / targetY;

        document.body.style.cssText = `
            transform: scale(${ratioX}, ${ratioY});
            transform-origin: left top;
            width: ${targetX}px;
            height: ${targetY}px;
            overflow: hidden;
        `;
        
        document.documentElement.style.overflow = 'hidden';
    }

    onMounted(() => {
        triggerScale();
        window.addEventListener("resize", resizeChange);
    });

    onUnmounted(() => {
        window.removeEventListener("resize", resizeChange);
        document.body.style.cssText = '';
        document.documentElement.style.overflow = '';
    });
}