<template>
<!-- <div id="app">
<router-view />
</div> -->
<div id="app" style="background: linear-gradient(#112550, #0f2c74)">
<div class="ScreenAdapter" :style="style">
<router-view />
</div>
</div>
</template>
<script>
export default {
data() {
return {
style: {
width: this.width + "px",
height: this.height + "px",
transform: "scale(1) translate(-50%, -50%)",
},
};
},
mounted() {
this.setScale();
window.onresize = this.Debounce(this.setScale, 1000);
},
props: {
width: {
type: String,
default: "1920",
},
height: {
type: String,
default: "1080",
},
},
methods: {
Debounce: (fn, t) => {
const delay = t || 500;
let timer;
return function () {
const args = arguments;
if (timer) {
clearTimeout(timer);
}
const context = this;
timer = setTimeout(() => {
timer = null;
fn.apply(context, args);
}, delay);
};
},
getScale() {
const w = window.innerWidth / this.width;
const h = window.innerHeight / this.height;
return w < h ? w : h;
},
setScale() {
this.style.transform =
"scale(" + this.getScale() + ") translate(-50%, -50%)";
},
},
};
</script>
<style lang="scss">
* {
margin: 0;
padding: 0;
list-style: none;
}
.ScreenAdapter {
transform-origin: 0 0;
position: absolute;
left: 50%;
top: 50%;
transition: 0.3s;
}
</style>
如果不全屏适应 请查看电脑缩放是否为100%
