Question

修改

我已经为此制作了一个JSFiddle ...但我不认为它会正常工作，因为（window）.resize（）;我没有玩JSFiddle，所以我觉得我做错了。

如果有人可以帮助解决这个问题，我会非常感谢。

所以我一直在努力寻找使用jQuery重现CSS媒体查询的绝对最佳方法。我几乎只在可能的情况下使用CSS媒体查询，但我现在正处理一个问题，我需要能够动态计算一个值并将其应用于窗口调整大小的元素。

使用下面的代码，我可以每增加1个像素来检查窗口宽度。首先，我想知道这是否是性能良好的，如果相反，当我们从断点移动到断点（480/768/1024）而不是沿途的每个像素时，只能执行该函数。

我的问题是：

我正在检查当前布局中有多少元素具有左边的CSS属性：0;然后我将元素数乘以240px并将其作为容器的高度值。

低于720px，此元素的高度需要为“auto”。这很好用。但是，如果我从320px上升，并且我达到了我的第一个断点（720px），我将正确的高度应用于我的容器，但是一旦我达到高于该断点（960px），高度永远不会更新。我想知道我做错了什么阻止了新值的计算和应用。

$(document).ready(function() {

    function checkWidth() {

        var windowSize = $(window).width();
        var elementCount = $('#casestudy-content article').filter(function() { return $(this).position().left === 0 }).length;

        if ( windowSize >= 720 && windowSize <= 959 ) {

            console.log("Greater than 720 and less than 960");

            console.log(elementCount);

            $('#casestudy-content').css('height', elementCount * 240 + 'px');

        }

        else if ( windowSize >= 960 && windowSize <= 1199 ) {

            console.log("Greater than 960 and less than 1200");

            console.log(elementCount);

            $('#casestudy-content').css('height', elementCount * 240 + 'px');

        }

        else if ( windowSize >= 1200 ) {

            console.log("Greater than or equal to 1200");

            console.log(elementCount);

            $('#casestudy-content').css('height', elementCount * 240 + 'px');

        }

        else {

            $('#casestudy-content').css('height', 'auto');

        }

    }

    // Execute on load
    checkWidth();

    // Bind event listener
    $(window).resize(checkWidth);

});

非常感谢任何帮助。

修改

所以我发现，如果我删除这些元素上的CSS转换，我的功能就完美无缺。

有趣的是，我的console.log（elementCount）在我到达断点时报告了正确的值，所以我认为这应该意味着我不必担心转换时间，但显然是这样。我怎样才能延迟这个功能，以便我可以保持转换？如果我的转换需要0.2秒，我需要延迟我的功能。对此有何帮助？

Answer 1

（当我们从断点移动到断点时执行该功能）

在当前的断点处保存到变量：

var breakpoint;
function checkWidth() {
{...}
if ( windowSize >= 720 && windowSize <= 959 && breakpoint != 720) {
        breakpoint = 720;
} else if ( windowSize >= 960 && windowSize <= 1199 && breakpoint != 960) {
        breakpoint = 960;
} etc..

http://jsfiddle.net/uhw3D/47/

（但是一旦我达到高于该值的断点（960px），高度永远不会更新）

当窗口大小大于500px时，section高度当然不会改变，因为只有3行（100px x 3 = 300px高度），section的最大宽度总是500px的。（每行5盒），你有14盒。 进行计算。

（我如何推迟延迟此功能）

我不知道你为什么需要这个，但你可以使用setTimeout()

你可以这样做：

$(window).resize(function() {
    setTimeout(checkWidth, 200); // 1000 milliseconds = 1 second
 });

在窗口调整大小时该函数将在0.2秒后触发

我希望我明白你的意思，或者请你解释一下你想做什么。

当CSS不是选项时，使用jQuery进行媒体查询

1 个答案: