4

我正在尝试制作一个脚本，该脚本将完成高于某个分辨率的等高函数。

一旦低于该分辨率，我希望脚本在等高列在网站的移动版本上消失时关闭。

我也希望在调整大小时执行此操作。到目前为止，这是我的代码。这根本行不通。

拉伸功能确实并且已经在检查宽度功能之外进行了测试。

这是我的代码：

原始拉伸功能

$(document).ready(function () {
    var $stretch = $(".eq");
    $stretch.animate({ height: $stretch.parent().height() }, 300 );
});

调整不起作用的功能

$(document).ready(function() {
    // Optimalisation: Store the references outside the event handler:
    var $window = $(window);
    var $stretch = $("#narrow")
    var $stretch2 = $(".eq")

    function checkWidth() {
        var windowsize = $window.width();
        if (windowsize > 440) {
            //if the window is greater than 440px wide then turn on jScrollPane..
            $stretch.animate({ height: $stretch.parent().height() }, 800 );
            $stretch.animate({ height: $stretch2.parent().height() }, 300 );                
        }
    }
    // Execute on load
    checkWidth();
    // Bind event listener
    $(window).resize(checkWidth);
});

我怎样才能做到这一点？

4

2 回答 2

3

我强烈建议使用 CSS 而不是 jQuery 来做这样的事情。响应式 UI 可以通过媒体查询来处理，如下所示：

@media screen and (max-width: 1200px) {
    body{ width:1000px; }
}

@media screen and (max-width: 440px) {
    body{ width:440px; }
}

有很多很棒的工具可以简化你，其中最受欢迎的工具之一是Twitter Bootstrap。

于 2012-10-12T16:05:36.193 回答
3

对于 jquery 部分

$(window).resize(function() {
    // do your stuff here

    checkWidth();
});

如果您将媒体查询与 js 组合使用，请记住，$(window).width()由于滚动条，媒体查询的宽度和宽度会有所不同。

于 2012-10-12T16:08:02.600 回答