jQuery尺寸分区响应

Question

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

一旦低于该决议，我希望脚本关闭，因为等高栏离开移动版本的网站。

我希望这个在调整大小的时候也能执行。到目前为止这是我的密码。这根本不管用。

拉伸函数在检查宽度函数之外进行了测试。

这是我的密码：

原始拉伸函数

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

我该怎么做？

Answer 1

对于jquery部分

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

    checkWidth();
});

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

Answer 2

我强烈建议在这种情况下使用CSS而不是jQuery。媒体查询可以处理响应性UI，如下所示：

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

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

有很多很好的工具可以简化这一点，其中最流行的是Twitter Bootstrap。