js控制屏幕高度自适应切换屏幕/窗口缩放仍然保持自适应

最新推荐文章于 2024-04-26 14:53:19 发布

原创最新推荐文章于 2024-04-26 14:53:19 发布 · 1.3w 阅读

7 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

18 篇文章

订阅专栏

本文介绍了一个公共JS方法，用于实现页面元素的自适应布局。通过调整元素的高度和宽度来适应不同屏幕尺寸，确保良好的用户体验。文章提供了具体实现代码及调用示例。

公共js方法如下：

//内容自适应窗口大小
function resizeEle(ele, isResetH, IsResetW) {
    var windowWidth = getPageSize()[2];
    var windowHeight = getPageSize()[3];
    if (isResetH !== null)
        $(ele).css("height", (windowHeight - isResetH) + "px").addClass('overflowY');
    if (IsResetW !== null)
        $(ele).css("width", (windowWidth - IsResetW) + "px");
}

调用方式：

 $(document).ready(function () {
 resizeEle($('div:first'), 80, null);//默认自适应，距屏幕底部80px
 $(window).resize(function () { resizeEle($('div:first'), 80, null); });//换屏自适应
});