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
Today, when I was using VMware to install a new v...
Mysql-connector-java driver version problem Since...
This article example shares the specific code of ...
A considerable number of websites use digital pagi...
illustrate MySql Community Edition supports table...
JSON (JavaScript Object Notation, JS Object Notat...
Table of contents 1. Introduction to computed 1.1...
In HTML pages, visual elements such as buttons an...
1. Install the virtual machine hyper-v that comes...
Copy code The code is as follows: <head> &l...
use Flexible boxes play a vital role in front-end...
Today is still a case of Watch app design. I love...
Table of contents Preface Core - CancelToken Prac...
Today, when installing nginx on the cloud server,...
1. Command Introduction The cal (calendar) comman...