<template>
|
<div id="app">
|
<div class="screen-adapter">
|
<router-view />
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
name: 'App',
|
mounted() {
|
this.handleScreenAdapter()
|
window.addEventListener('resize', this.handleScreenAdapter)
|
},
|
beforeDestroy() {
|
window.removeEventListener('resize', this.handleScreenAdapter)
|
},
|
methods: {
|
handleScreenAdapter() {
|
const designWidth = 1920
|
const designHeight = 1080
|
const scale = Math.min(
|
window.innerWidth / designWidth,
|
window.innerHeight / designHeight
|
)
|
const screenAdapter = document.querySelector('.screen-adapter')
|
screenAdapter.style.transform = `scale(${scale})`
|
screenAdapter.style.transformOrigin = 'left top'
|
screenAdapter.style.width = `${window.innerWidth / scale}px`
|
screenAdapter.style.height = `${window.innerHeight / scale}px`
|
}
|
}
|
}
|
</script>
|
|
<style>
|
* {
|
margin: 0;
|
padding: 0;
|
box-sizing: border-box;
|
}
|
|
html,
|
body {
|
width: 100%;
|
height: 100%;
|
overflow: hidden;
|
background: #000033;
|
}
|
|
#app {
|
-webkit-font-smoothing: antialiased;
|
-moz-osx-font-smoothing: grayscale;
|
width: 100%;
|
height: 100%;
|
overflow: hidden;
|
margin: 0 !important;
|
padding: 0 !important;
|
}
|
|
.screen-adapter {
|
transform-origin: left top;
|
}
|
</style>
|
