javascript - jQuery 调整大小和视口(viewport)检查点

Question

我的脚本有一个小问题。

我想根据屏幕宽度更改正文背景颜色。我的问题是我不知道我必须进行更改才能使其在 960 到 1130 之间工作。

例如:假设我重新调整了我的浏览器。

1300px -> 1150px = ok
1150px -> 1300px = ok
1150px -> 925px = ok
925px -> 1150px = **not ok** 

jQuery script:

$(window).resize(function() {
    viewportWidth = $(this).width();
    if ( viewportWidth >= 1200 && w < 1200){

        $('body').css('background', 'red');

        w = viewportWidth;

        console.log(w);

    }else if (viewportWidth < 1200 && w >= 1200) {

        $('body').css('background', 'green');

        w = viewportWidth;

        console.log(w);

    }else if (viewportWidth < 960 && w >= 960) {

        $('body').css('background', 'blue');

        w = viewportWidth;

        console.log(w);

    };
}).resize();

JsFiddle:

JsFiddle

Answer 1

您的问题是:当您低于 960 时，您将窗口的大小传递给变量 w .当您调整大小超过 960 时，您正在检查 (viewportWidth < 1200 && w >= 1200) 是否当然还有 w小于 1200，因为您的分辨率较小。

你为什么要使用那个变量？
我建议只删除它并以这种方式进行。

$(window).resize(function() {
    viewportWidth = $(this).width();

    if ( viewportWidth < 960) {
        $('body').css('background', 'blue');
    } else if (viewportWidth < 1200) {
        $('body').css('background', 'green');
    } else {
        $('body').css('background', 'red');
    };
});

编辑:

当你使用这个变量来控制你的函数时，你仍然可以使用它，只是改变中间的 if，像这样:

var w = 0;
$(window).resize(function() {
    var viewportWidth = $(this).width();

    if (viewportWidth < 960 && w >= 960) {
        $('body').css('background', 'blue');
    } else if (viewportWidth < 1200 && (w < 960 || w >= 1200)) {
        $('body').css('background', 'green');
    } else if (viewportWidth >= 1200 && w < 1200) {
        $('body').css('background', 'red');
    };

    w = viewportWidth;
});

这样，您将能够避免在每次调整大小时调用您的函数。

希望对您有所帮助!