当前位置：首页 > news >正文

vue3实现页面端的自适应布局

news 来源：原创 2025/6/22 21:40:33

安装插件：

 npm install lib-flexible-computer
 npm install postcss-px2rem
 npm install px2rem-loader

main.js配置：

引入外部配置

 import { initRem } from './utils/rem';
 import "lib-flexible-computer";
 initRem(); // 初始化 rem 响应式

rem.js配置

let resizeTimeout = null;

function debounce(func, wait) {
    return function (...args) {
        clearTimeout(resizeTimeout);
        resizeTimeout = setTimeout(() => func.apply(this, args), wait);
    };
}

export function setRemUnit(base = 1920, remUnit = 192) {
    const html = document.documentElement;
    const clientWidth = html.clientWidth;

    const minScale = 1;
    const maxScale = 1.2;

    let scale = clientWidth / base;
    scale = Math.max(minScale, Math.min(maxScale, scale));

    let fontSize = scale * remUnit;
    const minFontSize = 20; // 设置最小字体大小
    if (fontSize < minFontSize) {
        fontSize = minFontSize;
    }

    html.style.setProperty('--rem-unit', `${fontSize}px`);
}

export function initRem(base = 1920, remUnit = 192) {
    const html = document.documentElement;
    html.style.transition = 'none';

    setRemUnit(base, remUnit);

    window.onload = function () {
        document.documentElement.style.visibility = 'visible';
        html.style.transition = 'font-size 0.2s ease-out';
        setRemUnit(base, remUnit);
    };

    const resizeHandler = debounce(() => {
        html.style.transition = 'none';
        setRemUnit(base, remUnit);
        requestAnimationFrame(() => {
            html.style.transition = 'font-size 0.2s ease-out';
        });
    }, 100);

    window.addEventListener('resize', resizeHandler);

    if (document.fonts && document.fonts.ready) {
        document.fonts.ready.then(() => {
            setRemUnit(base, remUnit);
        });
    }
}