当CSS不可用时，使用jQuery进行媒体查询

Question

当CSS不可用时，使用jQuery进行媒体查询

jquerycssresizewindowmedia-queries

4

编辑：

我在JSFiddle上为此制作了一个演示...但我认为它不会正常工作，因为(window).resize();我还没有用过JSFiddle，所以我觉得我做错了什么。

http://jsfiddle.net/beefchimi/uhw3D/25/

如果有人能帮助解决这个问题，我将非常感激。

我一直在努力寻找使用jQuery复制CSS媒体查询的最佳方法。可以时，在我需要动态计算一个值并将其应用于窗口调整大小的元素时，我必须使用jQuery。

使用以下代码，我可以在每个1像素增量处检查窗口宽度。首先，我想知道从性能上讲是否好，并且是否有一种方式只在我们从断点到断点（480/768/1024）移动时执行函数，而不是沿途的每个像素。

我的问题在于：

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

在720px以下，此元素的高度必须为“自动”。这很好地工作。但是，如果我从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秒，那么我需要延迟函数的触发时间。请帮忙解决这个问题。

- beefchimi

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ghassan Elias · Accepted Answer

（在我们从断点到断点移动时执行该函数）

将当前断点保存到变量中：

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/

(但是一旦我达到了960像素的断点，高度就再也不会更新了)

当窗口大小大于500像素时，section的高度当然不会改变，因为只有3行（100像素x 3 = 300像素高度），而section的最大宽度始终为500像素。（每行5个盒子），你有14个盒子。算一下吧。

(我该如何延迟这个函数)

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

你可以这样做：

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

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

我希望我理解了你的意思，否则请更详细地解释你想要做什么。