前端自适应的一个样式设置记录

最新推荐文章于 2025-11-28 12:02:06 发布

原创最新推荐文章于 2025-11-28 12:02:06 发布 · 137 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #开发语言

<div id="app" :style="transformStyle">
</div>
<script type="module">
    var vm = new Vue({
        el:"#app",
        data:{
            transformStyle:{
                transform: 'scale('+window.innerWidth/1920+', '+window.innerHeight/911+')',
                transformOrigin: '0 0', // 设置缩放原点为左上角
                width: '1920px',
                height: '911px'
            }
        }
    });
    // 监听窗口大小变化
    window.addEventListener('resize', () => {
        vm.transformStyle = {
            transform: 'scale('+window.innerWidth/1920+', '+window.innerHeight/911+')',
            transformOrigin: '0 0', // 设置缩放原点为左上角
            width: '1920px',
            height: '911px'
        }
    });

</script>