本篇文章记录下,在pc端,大屏应用的构建。
1.大屏应用,是基于1k屏(1920*1080)来开发,产生的应用可以引用到其它大屏(2k, 4k ,8k等)。
2.所以在设计的时候,就可以让UI设计做成1k屏的样式,然后根据UI的尺寸,来将样式固定写死。
3.当我们的项目做成1k屏时,怎么样适配其它大屏呢?答:我们可以利用 css3 的 transform:scale ,通过页面的宽度来配置我的缩放比例。
对于以上的结论,我们在项目当中应用。在APP.vue中:
//给项目动态绑定上缩放比例scale
<template>
<div id="app" :style="{transform : `scale(${scale})`}">
<router-view/>
</div>
</template>
<script>
export default {
data(){
return{
scale:1
}
},
mounted() {
this.resize();
//这里:为了我们在开发时候看效果,做的防抖
window.addEventListener('resize',this.debounce(this.resize,100))
},
methods:{
debounce(func,wait){
let timer = null;
return function () {
if(timer){
clearTimeout(timer)
}
timer = setTimeout(func,wait)
}
},
resize(){//核心代码
let percent = document.documentElement.clientWidth / 1920;
this.scale = percent > 1 ? percent : 1 //大于1k屏就对应比例放大,小于1k屏就用1k屏
}
}
}
</script>
<style lang="less">
/*将大屏设置为1920*1080,设置缩放的方向*/
#app {
width: 1920px;
height: 1080px;
transition: all .2s linear;
transform-origin: left top;
}
</style>