大屏1920*1080缩放适应页面

最新推荐文章于 2024-06-22 14:11:27 发布

噫危乎高哉

最新推荐文章于 2024-06-22 14:11:27 发布

阅读量256

点赞数

分类专栏： css js html 文章标签：前端 javascript html

本文链接：https://blog.csdn.net/qq_42795670/article/details/134292182

版权

js 同时被 3 个专栏收录

13 篇文章 0 订阅

订阅专栏

css

3 篇文章 0 订阅

订阅专栏

html

2 篇文章 0 订阅

订阅专栏

文章介绍了如何通过JavaScript设置div的宽高并实现自适应屏幕的缩放效果，利用window.innerWidth和window.innerHeight获取窗口尺寸，与固定尺寸(1920x1080)进行比例计算，同时监听resize事件实时更新缩放比例。

摘要由CSDN通过智能技术生成

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)/1920
	let scalY = Number(window.innerHeight)/1080
	document.getElementById("transMain").style.transform = "scale("+scalX+","+scalY+")"
}