How to use Vue to realize screen adaptation of large screen pages
This article introduces the relevant knowledge of "how to use Vue to achieve screen adaptation of large screen pages". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!
The details are as follows
1. Set the size of the large screen design 1920 to 1080 in the configuration file
/ / appConfig.jsexport default {screen: {width:1920, height:1080, scale:20} / / large screen design width and height}
two。 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% isWider; _ 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% el.style.width; 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 mode of use
Main.js introduction
Import appConfig from'. / config/base.js';Vue.prototype.appConfig=appConfig;app.Vue introduces import {pageResize} from'. / utils/resetScreenSize' export default {name: 'App', data () {return {}}, mounted () {pageResize (); console.log (' pageResize');}} in the mounted function
Style lang= "stylus" in component
.mc {display: flex; flex-direction: column; align-content: center; justify-content: center; display: flex; flex: 11 auto; flex-direction: column; padding: (150.96) rem;} .leftC {width: (410Univer 96) rem;} .centerC {width: (1060Univer 96) rem } .RightC {width: (450 Universe 96) rem;}
Among them, 96 is obtained from 1920 in the configuration file, so there is no need to carry out various conversions.
This is the end of the content of "how to use Vue to achieve screen adaptation of large screen pages". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!
