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

My和风大福

于 2025-04-23 15:40:57 发布

阅读量119

点赞数 2

CC 4.0 BY-SA版权

文章标签：前端 javascript 开发语言

本文链接：https://blog.youkuaiyun.com/imjavaxb/article/details/147456085

<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>