大屏1920*1080缩放适应页面

本文主要是介绍大屏1920*1080缩放适应页面，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1.设置需要缩放的div的宽高为1920*1080

#transMain{width:1920px;height:1010px;transform-origin:left top;
}

2.缩放

let scalX = Number(window.innerWidth)/1920
let scalY = Number(window.innerHeight)/1080
document.getElementById("transMain").style.transform = "scale("+scalX+","+scalY+")"

原理其实很简单，就是获取页面的宽高，与1920*1080的比例差距，然后进行宽高缩放就行了

如果高度不是1080就该成需要的宽高就行

3.监听

window.addEventListener("resize",this.myResize) //添加
window.removeEventListener("resize",this.myResize) //删除
myResize(){let scalX = Number(window.innerWidth)/1920let scalY = Number(window.innerHeight)/1080document.getElementById("transMain").style.transform = "scale("+scalX+","+scalY+")"
}

这篇关于大屏1920*1080缩放适应页面的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---