说明
驾驶舱的适配方案很多,但目前找不到太多相关的文章,所以给大家分享一下平时用的最多的方案。因为原理非常简单,就只给个简单的vue的demo了,大家了解思路就行,这种方法所有框架都能用不限于vue。
实现方法
1.假设在根组件App.vue下的某个div内是驾驶舱的内容
<template>
<div id="app">
<div id="cokpitApp" class="cokpitApp">
这里是驾驶舱的内容
</div>
</div>
</template>
2.在驾驶舱的父节点(App.vue)样式里宽高要铺满,设置相对位置并将子元素水平、垂直剧中。在驾驶舱所在的节点上写死宽高(根据UI比例设置,这里以1920*1080为例),
<style lang="less">
#app {
color: #2c3e50;
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
position: relative;
.cokpitApp {
flex-shrink: 0;
width: 1920px;
height: 1080px;
background-size: 100% 100%;
color: #fff;
overflow: hidden;
position: relative;
}
}
</style>
3.写一个adapter()方法,用于根据屏幕尺寸计算出驾驶舱页面长和宽将要缩放的倍数并适配。在页面挂载结束后执行一次该方法,并且绑定监听尺寸变化的事件,屏幕尺寸变化时再次执行adapter()方法重新计算并适配。
methods: {
//适配-等比缩放
adapter() {
let screenWidth = window.innerWidth; //获取屏幕宽度
let screenHeighth = window.innerHeight; //获取屏幕高度
let cockpitDom = document.getElementById("cokpitApp");//获取驾驶舱节点
let xmultiple = screenWidth / 1920; //计算宽度缩放比例
let ymultiple = screenHeighth / 1080; //计算高度缩放比例
cockpitDom.style.transform = `scale(${xmultiple},${ymultiple})`;//缩放
},
},
created() {},
mounted() {
this.adapter(); //挂载结束后默认执行
window.addEventListener("resize", () => { //页面尺寸变化后重新适配
this.adapter();
});
},
结束啦~是不是非常简单~设置完毕后,打开控制台调整调试的尺寸就会发现内容会等比放大或者缩小。但是这种适配并不会改变内容的尺寸,字体的font-size并不会根据屏幕尺寸变,是因为在最外层调整的缩放比例导致看到的字体变小了。
补充说明
1.这种方案不会出现尺寸变化后文字换行或者样式堆积到一块的情况,但这种等比缩放更适用于用户屏幕宽高比和UI宽高比差距不大的情况下。如果差距大了现实出来的内容会扁长或者窄高。
2.各位大佬用的时候不用像我这样在app.vue写个div当驾驶舱,我只是为了简便,让大家了解思路,所以大佬们用的时候该搭的架子还是要好好搭的[狗头]
2.适配方案很多,各有优劣,这里推荐一种我常用的,画一个1920*1080的页面后就可以兼容大部分屏幕了,供大家参考,有不对的地方欢迎各位大佬指正。