前端页面可视化大屏适配方案

无论窗口缩放，屏幕放大缩小，我们的可视化界面都可以按照设计图比例正常展示，不会出现字体模块爆出，或者拉伸问题。这就是我想要的适配方案。

html

<div id="appRef">
  <div>html页面</div>
</div>

css

#appRef{
  width: 1920px; /* 设计图宽 */
  height: 1080px; /* 设计图高 */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: left top;
  overflow: hidden;
}

JS

// * 默认缩放值
        const scale = {
            width: '1',
            height: '1',
        }

        // * 设计稿尺寸（px）
        const baseWidth = 1920
        const baseHeight = 960

        // * 需保持的比例
        const baseProportion = parseFloat((baseWidth / baseHeight).toFixed(5))

        let drawTiming = null
        calcRate()
        window.addEventListener('resize', resize)

        // * 初始化页面比例
        function calcRate() {
            const appRef = document.getElementById("appRef")
            if (!appRef) return
            // 当前宽高比
            const currentRate = parseFloat((window.innerWidth / window.innerHeight).toFixed(5))
            if (appRef) {
                if (currentRate > baseProportion) {
                    // 表示更宽
                    scale.width = ((window.innerHeight * baseProportion) / baseWidth).toFixed(5)
                    scale.height = (window.innerHeight / baseHeight).toFixed(5)
                    appRef.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`
                } else {
                    // 表示更高
                    scale.height = ((window.innerWidth / baseProportion) / baseHeight).toFixed(5)
                    scale.width = (window.innerWidth / baseWidth).toFixed(5)
                    appRef.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`
                }
            }
        }

        // * 窗口大小变化
        function resize() {
            clearTimeout(drawTiming)
            // 加延迟是为了更好的看到变化的过程，不需要的可以不用
            drawTiming = setTimeout(() => {
                calcRate()
            }, 200)
        }

        var t = window.devicePixelRatio   // 获取下载的缩放 125% -> 1.25    150% -> 1.5
        document.body.style.zoom = 1 / t;   // 就去修改页面的缩放比例
        window.onresize = function () {

            location.reload();


        }

原文地址：https://blog.csdn.net/weixin_68522070/article/details/136283335

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！