本篇内容介绍了“怎么用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得来，这样不用在进行各种换算了
“怎么用Vue实现大屏页面的屏幕自适应”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站，小编将为大家输出更多高质量的实用文章！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
