使用jquery收听浏览器的宽度/高度更改

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

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

如果你的布局没有更多的细节,你很难确切地知道你需要什么样的改变,但这会让你走上正确的方向。

如果只需要将元素相对于另一个元素(而不是整个文档)定位,则可能不需要使用javascript。您可以使用“位置:相对”:

<div id="myContainer" style="position:relative">

    <div id="myElement" style="position:absolute;left:100px;"></div>

</div>

因为Mycontainer有 position:relative ,髓鞘将被完全定位,但是 相对的 到mycontainer,而不是相对于整个文档。有了这一点,您可以构建相当复杂但健壮的位置,这些位置将是浏览器大小的不可知论者。

还有一个来自jqui网站的插件。

http://www.jqui.net/jquery-projects/jquery-mutate-official/

这是演示: http://www.jqui.net/demo/mutate/

希望它有帮助。