如何做大屏自适应

export function autoScale(selector, options) {
// 这里定义了一个 debounce 函数,用于限制函数在一定时间内只能触发一次
function debounce(fn, delay) {
let timer = null;
return function () {
// 每次函数被调用时,清除之前的定时器
if (timer) clearTimeout(timer);
// 创建一个新的定时器,在指定的延迟后执行传入的函数
timer = setTimeout(fn, delay);
}
}

// 这里定义了 autoScale 函数,用于根据指定的宽高比例调整元素的大小和位置
// 首先获取指定选择器对应的元素
const el = document.querySelector(selector);
// 从传入的参数 options 中获取目标宽度和高度
const { width, height } = options;

// 设置元素变换的原点为左上角
el.style.transformOrigin = 'top left';

// 设置元素的过渡效果,以便在缩放时产生平滑的动画
el.style.transition = 'transform .5s';

// 定义一个初始化函数,用于计算并设置元素的缩放和位置
function init() {

    // 计算水平和垂直方向上的缩放比例,取两者中较小的值
    const scaleX = innerWidth / width;
    const scaleY = innerHeight / height;
    const scale = Math.min(scaleX, scaleY);

    // 计算使元素居中显示的偏移量
    const left = (innerWidth - width * scale) / 2;
    const top = (innerHeight - height * scale) / 2;

    // 设置元素的变换,包括缩放和平移
    el.style.transform = `translate(${left}px, ${top}px) scale(${scale})`;
}

// 首次调用初始化函数,确保页面加载时元素已经按照指定比例进行了调整
init();

// 监听窗口大小变化事件,并使用 debounce 函数来控制频繁触发的 resize 事件
addEventListener('resize', debounce(init, 200));

}