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:
|
<<: Detailed explanation of the persistence implementation principle of transactions in MySQL
>>: HTML validate HTML validation
Because I have a database tutorial based on SQL S...
Hyperlink, also called "link". Hyperlin...
Table of contents 1. First, configure the main.js...
Table of contents 1. Introduction to ReactJS 2. U...
MySQL escape Escape means the original semantics ...
MySQL is a very powerful relational database. How...
1. Stop the MySQL service in the command line: ne...
This article describes how to create multiple ins...
The search performance from fastest to slowest is...
Installation Environment 1. gcc installation To i...
Table of contents 1. Mini Program Subcontracting ...
Suppose a user management system where each perso...
This article example shares the specific code of ...
Preface With the crazy speculation of virtual cur...
1. Introduction to inode To understand inode, we ...