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

Summary of Mysql-connector-java driver version issues

Mysql-connector-java driver version problem Since...

Creating a Secondary Menu Using JavaScript

This article example shares the specific code of ...

How to implement digital paging effect code and steps in CSS

A considerable number of websites use digital pagi...

MySQL whole table encryption solution keyring_file detailed explanation

illustrate MySql Community Edition supports table...

Best way to replace the key in json object

JSON (JavaScript Object Notation, JS Object Notat...

Analyze the difference between computed and watch in Vue

Table of contents 1. Introduction to computed 1.1...

Detailed explanation of JavaScript onblur and onfocus events

In HTML pages, visual elements such as buttons an...

How to write HTML head in mobile device web development

Copy code The code is as follows: <head> &l...

Detailed explanation of CSS3 elastic expansion box

use Flexible boxes play a vital role in front-end...

Four completely different experiences in Apple Watch interaction design revealed

Today is still a case of Watch app design. I love...

Solve the problem of yum installation error Protected multilib versions

Today, when installing nginx on the cloud server,...

Use of Linux cal command

1. Command Introduction The cal (calendar) comman...