前端自适应缩放解决方案

shuimoY

已于 2023-03-06 09:19:37 修改

阅读量1.4k

点赞数 2

文章标签：前端 Powered by 金山文档

于 2023-02-22 17:18:05 首次发布

本文链接：https://blog.csdn.net/qq_39643110/article/details/129166693

版权

文章介绍了一种方法，通过CSS和JavaScript实现基于1920*1080设计稿的等比例缩放页面，确保在不同设备上保持高还原度。利用Vue.js监听窗口大小变化，动态调整缩放比例，保持固定的16:9宽高比，从而保证布局的适应性。

摘要由CSDN通过智能技术生成

设计师以1920*1080 比例给出设计稿，需要高还原度实现效果可以使用等比例缩放页面方案，具体代码如下

  html,
    body {
        background: #010a3d;
        padding: 0;
        margin: 0;
        width: 100%;
        height: 100%;
        --scale: 1;
    }
    
    .homepage {
        width: 1920px;
        height: 1080px;
        background: rgb(101, 154, 252);
        background-size: 100% 100%;
        position: absolute;
        transform: scale(var(--scale)) translate(-50%, -50%);
        transform-origin: 0 0;
        left: 50%;
        top: 50%;
        transition: 0.3s;
    }

<!--自动缩放容器 1920*1080 -->
<div id="homepage" v-cloak class="ScaleBox" ref="ScaleBox" :style="{width: width + 'px',height: height + 'px'}">


<script>
    'use strict';
    var homepage = new Vue({
        el: '#homepage',
        data() {
            return {
                scale: 0,
                width: 1920,
                height: 1080,
            }
        },
        mounted() {
            //以1920*1080设计稿 为标准尺寸进行自动缩放
            this.setScale();
            window.addEventListener("resize", this.debounce(this.setScale));
      
        },
        methods: {
            getScale() {
                // 固定好16：9的宽高比，计算出最合适的缩放比
                const {width, height} = this;
                const wh = window.innerHeight / height;
                const ww = window.innerWidth / width;
                console.log(ww < wh ? ww : wh);
                return ww < wh ? ww : wh;
            },
            setScale() {
                // 获取到缩放比例，设置它
                this.scale = this.getScale();
                if (this.$refs.ScaleBox) {
                    this.$refs.ScaleBox.style.setProperty("--scale", this.scale);
                }
            },
            debounce(fn, delay) {
                const delays = delay || 500;
                let timer;
                return function () {
                    const th = this;
                    const args = arguments;
                    if (timer) {
                        clearTimeout(timer);
                    }
                    timer = setTimeout(function () {
                        timer = null;
                        fn.apply(th, args);
                    }, delays);
                };
            },
        },
        created() {
        }
    })
</script>