大屏自适应

export const AutoScale = (targetEl, options, root)=> {
    const el = document.querySelector(targetEl);
    if(!el) throw new Error("初始化失败");
    const { width, height } = options;
    el.style.transformOrigin = 'top left';
    el.style.transition = 'all 0.5s';
    const 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();
    // 防抖
    const debounce = root.$lib.debounce(()=> {
        init();
    }, 1000)
    addEventListener('resize', debounce)
}
posted @ 2024-05-14 15:55  HuangBingQuan  阅读(9)  评论(0编辑  收藏  举报