Vue实现大屏页面的屏幕自适应

本⽂实例为⼤家分享了Vue实现⼤屏页⾯的屏幕⾃适应的具体代码，供⼤家参考，具体内容如下1. 在配置⽂件设置⼤屏设计的尺⼨1920*1080

//appConfig.jsexport default{ screen:{

width:1920, height:1080, scale:20 }//⼤屏设计宽⾼}

2. 定义resetScreenSize.js

import appConfig from '../config/base'

export function pageResize(callback) { let init = () => {

console.log(window.innerHeight + \ 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 + \ }

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 使⽤⽅式main.js 引⼊

import appConfig from './config/base.js';Vue.prototype.appConfig=appConfig;app.Vue 在mounted函数引⼊

import {pageResize} from './utils/resetScreenSize'

export default { name: 'App', data(){ return{ } },

mounted(){

pageResize();

console.log('pageResize'); }}

组件中样式 lang=\"stylus\"

.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为 配置⽂件中1920/20得来，这样不⽤在进⾏各种换算了

以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。