<template>
<div class="ScreenAdapter" :style="style">
<slot />
</div>
</template>
<script>
export default {
name: "",
//参数注入
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 = this.Debounce(this.setScale, 1000);
},
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];
},
// 设置比例
setScale() {
var arr = this.getScale();
console.log(arr);
this.style.transform =
"scale(" + arr[0] + "," + arr[1] + ") translate(-50%, 0%)";
},
},
};
</script>
<style scoped>
html,
body {
width: 100vw;
height: 100vh;
background-color: #000;
overflow-x: hidden;
}
* {
margin: 0;
padding: 0;
}
.ScreenAdapter {
transform-origin: 0 0;
position: absolute;
left: 50%;
top: 0%;
transition: 0.3s;
background: #000 url("~@/components/bg.png") no-repeat;
}
</style>
大屏适配
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- 我们只要监听浏览器窗口大的小，同时控制变化的比例就可以了。 封装一个全局组件 以vue 为主，直接粘贴本人编写的代...
- 前言 相信大多数移动端前端开发者都是用过lib-flexible来作为移动端适配的解决方案。lib-flexi...
