Vue 大屏可视化-屏幕自适应(保持设计尺寸比例)

最新推荐文章于 2026-05-29 09:07:48 发布

原创

最新推荐文章于 2026-05-29 09:07:48 发布 · 3.1w 阅读

118

收录于

当前文章被以下社区和专栏收录：

本文分享了在使用Vue开发大屏应用时遇到的自适应布局解决方案，通过配置设计尺寸和编写自定义函数，实现了不同屏幕尺寸下的比例保持，适用于各种设备。

最近在用VUE写大屏页面，遇到屏幕自适应问题，根据设计的尺寸，在各种屏幕尺寸下自适应，保持显示比例不变，经过几天摸索，终于达到了效果，希望为还在这问题困扰的提供点帮助

铺满全屏效果见Vue 大屏可视化铺满全屏

1. 在配置文件设置大屏设计的尺寸1920*1080


//config/base.js
export default{
    screen:{
        width:1920,
        height:1080,
        scale:20
    }//大屏设计宽高
}

2. 定义resetScreenSize.js


import appConfig from '../config/base'

export function pageResize(callback) {
    let init = () => {
        console.log(window.innerHeight + "," + window.innerWidth);    
        let _el = document.getElementById('app');
       
        let hScale = window.innerHeight / appConfig.screen.height;
        let wScale = window.innerWidth / appConfig.screen.width;
        let pageH = window.innerHeight;
        let pageW = window.innerWidth;
       
        let isWider = (window.innerWidth / window.innerHeight) >= (appConfig.screen.width / appConfig.screen.height);

标签

#vue.js