兼容问题onresize

最新推荐文章于 2023-03-10 20:29:24 发布

南小鱼

最新推荐文章于 2023-03-10 20:29:24 发布

阅读量282

点赞数

文章标签：窗口调整响应式布局屏幕尺寸 CSS JavaScript

本文链接：https://blog.youkuaiyun.com/qq_44737178/article/details/117296127

版权

这段代码展示了如何在窗口大小变化时触发一个函数，用于计算并设置页面的宽度和高度。它定义了screenWidth、screenHeight、proofHeight、lengthWidth、hengWidth和volueHeight等变量来适应屏幕尺寸变化，实现响应式布局。注意，作者建议使用百分比单位进行尺寸定义以确保跨设备兼容性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

window.onresize = () => {
      return (() => {
        window.screenWidth = document.body.clientWidth * 0.375
        window.screenHeight = document.body.clientHeight - 100
        this.proofHeight = window.screenHeight
        this.lengthWidth = window.screenWidth
        this.hengWidth = document.body.clientWidth * 0.52 - 230
        this.volueHeight = document.body.clientHeight - 430
      })()
    }

这个方法在窗口发生变化或者框架被调整大小的时候触发

写高度宽度的时候最好用百分比