最近手里有个需求,需要做大屏适配,原本在本地展示正常的页面,放在大屏上展示就无法满屏了,在网上搜集了一点资料最终自己总结了下
首先在mounted生命周期中,监听window的变化
window.addEventListener('resize', () => {
console.log('resize')
this.resize()
})
然后在methods中增加resize方法
resize() {
// 记录开发时候的尺寸
const width = 1550 ,height = 680
let w = window.innerWidth / width
let h = window.innerHeight / height
let scale = w < h ? w : h
let body = document.body
// 通过transform 去对body进行等比缩小
body.style.transform = 'scale(' + scale + ')'
body.style.transformOrigin = '0 0'
}
然后正常情况下等比的大屏就可以适配了