Vue realizes screen adaptation of large screen pages

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

Recommend

SQL Server database error 5123 solution

Because I have a database tutorial based on SQL S...

Tutorial on using hyperlink tags in XHTML

Hyperlink, also called "link". Hyperlin...

Example of adding multi-language function to Vue background management

Table of contents 1. First, configure the main.js...

ReactJs Basics Tutorial - Essential Edition

Table of contents 1. Introduction to ReactJS 2. U...

Detailed use cases of MySql escape

MySQL escape Escape means the original semantics ...

The perfect solution to the Chinese garbled characters in mysql6.x under win7

1. Stop the MySQL service in the command line: ne...

A brief understanding of MySQL storage field type query efficiency

The search performance from fastest to slowest is...

Centos7.3 How to install and deploy Nginx and configure https

Installation Environment 1. gcc installation To i...

Teach you how to subcontract uniapp and mini-programs (pictures and text)

Table of contents 1. Mini Program Subcontracting ...

Detailed Analysis of the Selection of MySQL Common Index and Unique Index

Suppose a user management system where each perso...

Pure js to achieve typewriter effect

This article example shares the specific code of ...

Detailed explanation of Linux index node inode

1. Introduction to inode To understand inode, we ...