1.在配置文件设置大屏设计尺寸1920*1080
//config/base.js export 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 + "," + 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.使用方式 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得来，这样不用在进行各种换算了
