缩放浏览器窗口,项目缩放平铺整个页面
修改App.vue文件
<template>
<div id="app" class="app" :style="{'width':`${style.width}px`,'height':`${style.height}px`,'transform':`${style.transform}`}">
<router-view />
</div>
</template>
<script>
export default {
name: 'App',
data () {
return {
style: {
width: 1920,
height: 1080,
transform: "scaleY(1) scaleX(1) translate(-50%, -50%)",
// img:require("../assets/layout/背景.png")
},
};
},
mounted() {
let that = this;
that.setScale();
/*窗口改变事件*/
window.addEventListener("resize", function () {
that.setScale();
});
},
methods: {
getScale() {
const w = window.innerWidth / this.style.width;
const h = window.innerHeight / this.style.height;
return {x:w,y:h};
},
setScale() {
let scale = this.getScale();
this.style.transform = "scaleY(" + scale.y + ") scaleX(" + scale.x + ") translate(-50%, -50%)";
},
},
}
</script>
<style lang="scss">
.app {
transform-origin: 0 0;
position: fixed;
left: 50%;
top: 50%;
}
</style>