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

Question

我有一些div,当页面准备就绪时设置为绝对位置(CSS),并相对于另一个固定的div定位,哪个工作正常.但是,在加载页面并设置所有内容之前,如果页面调整大小,那些绝对div不会跟随更改,移动到其他位置,我认为它们相对于屏幕的顶部和左侧给出了值.

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

有没有办法监听浏览器的宽度/高度的变化,以使这些div保持在正确的位置.

提前致谢!

Answer 1

首先,您要开始将窗口调整大小事件绑定到您选择的函数.

$(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);
}

如果没有更详细的布局,很难说明你需要做出哪些改变,但这应该会让你朝着正确的方向前进.