vue大屏

最新推荐文章于 2025-05-22 08:30:00 发布

原创最新推荐文章于 2025-05-22 08:30:00 发布 · 129 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

main.ts

const adjustScreenScale = ()=> {
    const designWidth = 1920;
    let screenRate = window.innerWidth / designWidth;
    console.log(window.innerWidth,'视图宽度', screenRate);
    
    /* if (screenRate < 0.8) screenRate = 0.8;
    if (screenRate > 1.5) screenRate = 1.5; */
    document.body.style.transformOrigin = '0 0';
    document.body.style['transform'] = `scale(${screenRate})`;
    document.documentElement.style['background'] = 'rgba(4, 9, 39, 1)'
}
adjustScreenScale();
window.onresize = ()=> {
    adjustScreenScale();
}

在这里插入图片描述
设置对应的宽度body的css宽度 1920 需要和const designWidth = 1920两个数值保持一直此处设置的body ，也可根据自己的id，class进行设置