Vue realizes screen adaptation of large screen pages

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

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

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

2. Define 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 Usage

main.js import

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

Style lang="stylus" in the component

 .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 is derived from 1920/20 in the configuration file, so there is no need to perform various conversions.

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:

VUE develops the background management page steps of the distributed medical registration system
Example steps for VUE to build a distributed medical registration system backend management page
How to implement page jump in Vue project
VUE develops hospital settings page steps for distributed medical registration system

<<: Detailed explanation of the persistence implementation principle of transactions in MySQL

>>: HTML validate HTML validation