本篇文章记录下，在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>
