Vue实现大屏页面的屏幕自适应
作者：Hotice888
这篇文章主要为大家详细介绍了Vue实现大屏页面的屏幕自适应，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了Vue实现大屏页面的屏幕自适应的具体代码，供大家参考，具体内容如下
1. 在配置文件设置大屏设计的尺寸1920*1080
//appConfig.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得来，这样不用在进行各种换算了
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。