Vue realizes screen adaptation for large-screen pages

This article shares the specific code for Vue to implement screen adaptation on large-screen pages for your reference. The specific content is as follows

1. Set the size of the large screen design in the configuration file 1920*1080

//
export default{
    screen:{
        width:1920,
        height:1080,
        scale:20
    }//Large screen design width and height}

2. Definition

import appConfig from '../config/base'
 
export function pageResize(callback) {
    let init = () => {
        ( + "," + );    
        let _el = ('app');
       
        let hScale =  / ;
        let wScale =  / ;
        let pageH = ;
        let pageW = ;
       
        let isWider = ( / ) >= ( / );
        (isWider);
        if (isWider) {
                _el. = +'px';// '100%';
                _el. = pageH *  /  + 'px';
                _el.='0px';
                _el.=( -pageH *  / )*0.5+'px';
                (_el. + "," + _el.)
        }
        else {
                _el. = +'px';// '100%';
                _el. = pageW *  /  + 'px';
                _el.= 0.5*(-pageW *  / )+'px';
                _el.='0px';
                (_el.);
                (_el.);
        }
         =  (_el.clientWidth / ) + 'px';
 
      
    }    
    var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
    (resizeEvt, init, false);
    ('DOMContentLoaded', init, false);
    init()
}

3 How to use

Introduced

import appConfig from './config/';
=appConfig;
  existmountedFunction introduction

import  {pageResize} from './utils/resetScreenSize'
 
export default {
  name: 'App',
  data(){
    return{
       
    }
  },
  mounted(){
    pageResize();
    ('pageResize');
  }
}

Style in component 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;
    }

Among them, 96 is obtained in the configuration file 1920/20, so there is no need to perform various conversions.

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.