Question

我正在尝试制作一个脚本，它将在一定分辨率以上完成相同高度的功能。

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

我希望这也可以在resize上执行。到目前为止，这是我的代码。这根本不起作用。

拉伸功能在检查宽度功能之外进行了测试。

这是我的代码：

原始拉伸功能

$(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

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

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

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

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

Answer 2

对于jquery部分

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

    checkWidth();
});

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

jQuery调整Div响应

2 个答案: