Vue大屏页面屏幕自适应

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

//appConfig.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);
        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');
  }
}

4.组件中样式

.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大屏页面屏幕自适应

猜你喜欢