div大小重置

最新推荐文章于 2023-10-13 14:26:06 发布

山鬼taro

最新推荐文章于 2023-10-13 14:26:06 发布

阅读量244

点赞数

分类专栏：大数据可视化

本文链接：https://blog.csdn.net/sinat_36359516/article/details/119641421

版权

大数据可视化专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文介绍如何使用JavaScript动态调整页面元素大小，通过监测窗口大小和父元素尺寸，实现页面在不同屏幕和设备上的自适应。关键代码展示了如何计算缩放比例并应用到id为' SL-data-wrap '的元素上。

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

1、获取窗口宽高

const win_height = Number(window.innerHeight);
const win_width = Number(window.innerWidth);

2、获取父元素宽高

const parent_Height = document.getElementById("SL-data-wrap").parentNode.clientHeight
const parent_Width = document.getElementById("SL-data-wrap").parentNode.clientWidth

3、自行选择根据窗口大小重置、根据父元素大小重置

resize() {
        //根据父元素大小重置页面
        const parent_Height = document.getElementById("SL-data-wrap").parentNode.clientHeight
        const parent_Width = document.getElementById("SL-data-wrap").parentNode.clientWidth
        //根据窗口大小重置页面
        const win_height = Number(window.innerHeight);
        const win_width = Number(window.innerWidth);

        let width=parent_Width
        let height=parent_Height
        let devDisplayHeight=1440*0.78    //显示器高度 1600*900 1920*1080 2560*1440
        let devDisplayWidth=2560*0.78     //显示器宽度

        if ((width / height) >= (devDisplayWidth / devDisplayHeight)) {
            var size = height / devDisplayHeight
        }
        else {
            var size = width / devDisplayWidth
        }
        $("#SL-data-wrap").css('-webkit-transform', 'scale(' + size + ')');
    }