怎么用Vue实现大屏页面的屏幕自适应

本篇内容介绍了"怎么用Vue实现大屏页面的屏幕自适应"的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

具体内容如下

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

//appConfig.jsexport 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);        console.log(isWider);        if (isWider) {                _el.style.height = window.innerHeight+'px';// '100%';                _el.style.width = pageH * appConfig.screen.width / appConfig.screen.height + 'px';                _el.style.top='0px';                _el.style.left=(window.innerWidth -pageH * appConfig.screen.width / appConfig.screen.height)*0.5+'px';                console.log(_el.style.width + "," + _el.style.height)        }        else {                _el.style.width = window.innerWidth+'px';// '100%';                _el.style.height = pageW * appConfig.screen.height / appConfig.screen.width + 'px';                _el.style.top= 0.5*(window.innerHeight-pageW * appConfig.screen.height / appConfig.screen.width)+'px';                _el.style.left='0px';                console.log(_el.style.height);                console.log(_el.style.top);        }        document.documentElement.style.fontSize =  (_el.clientWidth / appConfig.screen.scale) + 'px';           }        var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';    window.addEventListener(resizeEvt, init, false);    document.documentElement.addEventListener('DOMContentLoaded', init, false);    init()}

3 使用方式

main.js 引入

import appConfig from './config/base.js';Vue.prototype.appConfig=appConfig;app.Vue  在mounted函数引入import  {pageResize} from './utils/resetScreenSize' export default {  name: 'App',  data(){    return{           }  },  mounted(){    pageResize();    console.log('pageResize');  }}

组件中样式 lang="stylus"

 .mc{        display :flex;        flex-direction :column;        align-content :center;        justify-content :center;          display: flex;        flex: 1 1 auto;        flex-direction: column;        padding:(15/96)rem;    }     .leftC{       width :(410/96)rem;    }     .centerC{       width :(1060/96)rem;    }     .rightC{       width :(450/96)rem;    }

其中 96为 配置文件中1920/20得来，这样不用在进行各种换算了

"怎么用Vue实现大屏页面的屏幕自适应"的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注网站，小编将为大家输出更多高质量的实用文章！