浏览器放大缩小后,保持项目的尺寸比例不变
onMounted(() => {
resizeFn()
window.addEventListener('resize',resizeFn)
})
onUnmounted(() => {
window.removeEventListener('resize',resizeFn)
})
const resizeFn = ()=>{
const innerWidth = window.innerWidth
if(innerWidth <= 1200){
document.querySelector('html').style.width = '1200px'
document.querySelector('html').style.overflowX = 'hidden'
document.querySelector('html').style.transformOrigin = '0 0'
document.querySelector('html').style.transform = `scale(${(innerWidth/1200).toFixed(2)})`
}else if(innerWidth >= 1920){
document.querySelector('html').style.width = '1920px'
document.querySelector('html').style.overflowX = 'hidden'
document.querySelector('html').style.transformOrigin = '0 0'
document.querySelector('html').style.transform = `scale(${(innerWidth/1920).toFixed(2)})`
}else{
document.querySelector('html').style = {}
}
}