1、在主盒子里面引入动态样式，在data里面定义盒子比例值和style参数
（1）、动态引入样式
<div class="home_box" :style="style">
（2）、定义rate和style（在data里面定义）
rate: 1, // 用于判断整体缩小比例是多少
style: null,
2、核心方法
提示：document.documentElement.clientWidth获取当前浏览器宽度；
主要核心是通过transform的scale属性来控制主盒子的动态缩放，来完成大屏的适配。
resize_window() {
const widthRatio = Number(document.documentElement.clientWidth / 1920)
this.rate = widthRatio
this.style = {
transformOrigin: 'left top',
transform: `scale(${this.rate},${this.rate})`,
'-webkit-transform': `scale(${this.rate},${this.rate})`,
'-moz-transform': `scale(${this.rate},${this.rate})`,
'-o-transform': `scale(${this.rate},${this.rate})`,
'-ms-transform': `scale(${this.rate},${this.rate})`
}
},
3、在mounted和destroyed钩子函数里面使用核心方法
mounted () {
this.resize_window()
window.addEventListener('resize', () => {
this.resize_window()
})
},
destroyed() {
window.removeEventListener('resize', () => {
this.resize_window()
})
},
