根据scale缩放适配大屏
// 这种适配只适合 1920*1080 和3840 * 2160的屏幕如果是超宽屏幕就往下看
// 不多逼逼 直接上代码
<template>
<div class="home" id="home" ref="home"></div>
</template>
<script>
export default {
name: "Home",
methods: {
f() {
var w = window.innerWidth; //获取窗口宽度
var h = window.innerHeight;//获取窗口高度
const w_w = this.$refs.home.offsetWidth;//获取元素宽度
const h_h = this.$refs.home.offsetHeight;//获取元素高度
let num = 0;
w / h > w_w / h_h ? (num = h / h_h) : (num = w / w_w);
// 窗口宽/窗口高>元素宽/元素高
home.style.transform = `translate(-50%, -50%) scale(${num})`;
},
},
mounted() {
this.f();
window.addEventListener("resize", this.f);
},
};
</script>
<style scoped>
.home {
/* width: 7680px; */
/* height: 2160px; */
width: 1920px;
height: 1080px;
background-color: rgb(16, 179, 111);
transform: translate(-50%, -50%);
position: absolute;
left: 50%;
top: 50%;
transition: all 1s;
}
</style>
根据scale缩放 超宽屏幕适配方案
<template>
<div
id="screen"
:style="{
width: `${style.width}px`,
height: `${style.height}px`,
transform: `${style.transform}`
}"
>
<div class="box"></div>
</div>
</template>
<script>
export default {
name: 'ScaleBox',
props: {},
data () {
return {
style: {
width: '7680',
height: '2160',
transform: 'scaleY(1) scaleX(1) translate(-50%, -50%)'
}
}
},
methods: {
getScale () {
const w = window.innerWidth / this.style.width
const h = window.innerHeight / this.style.height
return { x: w, y: h }
},
setScale () {
const scale = this.getScale()
this.style.transform =
'scaleY(' + scale.y + ') scaleX(' + scale.x + ') translate(-50%, -50%)'
}
},
mounted () {
const that = this
that.setScale()
/* 窗口改变事件 */
window.addEventListener('resize', function () {
console.log('窗口发生变化')
that.setScale()
})
}
}
</script>
<style scoped>
#screen {
z-index: 100;
transform-origin: 0 0;
position: fixed;
left: 50%;
top: 50%;
transition: 0.3s;
}
.box {
width: 100%;
height: 100%;
background-color: green;
}
</style>