javascript - 使用 jQuery 监听浏览器宽度/高度变化

Question

我有一些 div 在页面准备好时设置了绝对位置 (CSS)，并且相对于另一个固定的 div 定位，效果很好。然而，在加载页面并设置所有内容之前，如果调整页面大小，那些绝对 div 不会跟随变化，移动到其他地方，我认为它们被赋予相对于屏幕顶部和左侧的值。

我用作定位绝对 div 的起点的相对 div 的位置也可能相对于它上面的 div 改变位置。

有什么方法可以监听浏览器宽度/高度的变化，以使这些 div 保持在正确的位置吗？

Answer 1

首先，您要开始将窗口调整大小事件绑定(bind)到您选择的函数。

$(window).on("resize", methodToFixLayout);

现在您可以确定新的高度和宽度，并从那里对页面进行调整。

function methodToFixLayout( e ) {
    var winHeight = $(window).height();
    var winWidth = $(window).width();
    //adjust elements css etc.....
    //$("#someDiv").css('someProperty',someValue based on winHeight and winWidth);
}

如果没有关于您的布局的更多细节，很难说出您究竟需要进行哪些更改，但这应该会让您朝着正确的方向前进。