大屏项目兼容分辨率有效方案
亲测有效，核心相关代码如下：
<template>
<div class="ScreenAdapter" :style="style">
<slot />
</div>
</template>
<script>
import { debounce } from 'lodash'
export default {
name: 'ScreenContainer',
// 参数注入
props: {
width: {
type: String,
default: '1920'
},
height: {
type: String,
default: '1080'
}
},
data() {
return {
style: {
width: this.width + 'px',
height: this.height + 'px',
transform: 'scale(1) translate(-50%, -50%)'
}
}
},
mounted() {
this.setScale()
window.onresize = debounce(this.setScale, 200)
},
beforeDestroy() {
window.onresize = null
},
methods: {
// 获取放大缩小比例
getScale() {
const w = window.innerWidth / this.width
const h = window.innerHeight / this.height
console.log(w, h)
return [w, h]
},
// 设置比例
setScale() {
const [x, y] = this.getScale()
this.style.transform = `scale( ${x} , ${y}) translate(-50%, -50%)`
}
}
}
</script>
<style lang="scss" scoped>
.ScreenAdapter {
transform-origin: 0 0;
position: absolute;
left: 50%;
top: 50%;
transition: 0.3s;
overflow: hidden;
background: url(~@/assets/images/Screen/cont-bg.png) no-repeat;
background-size: 100% 100%;
}
</style>
