jQuery 调整大小和视口检查点

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

如果它只是为了改变主体颜色，你最好在媒体查询的帮助下通过纯 CSS 来实现这一点。

看到这个 simple example。您唯一需要的是 2 个媒体查询：

body {
  background-color: blue;
}

@media (min-width: 960px) {
  body {
    background-color: green;
  }
}

@media (min-width: 1200px) {
  body {
    background-color: red;
  }
}

Javascript 调整大小事件有点棘手。在为这些编写代码时，您还应该考虑遵循最佳实践以获得更好的性能：
Leaner, Meaner, Faster Animations with requestAnimationFrame.

Answer 2

您的问题是：当您低于 960 时，您将 window 的大小传递给变量 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;
});

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

希望对您有所帮助！

jQuery 调整大小和视口检查点

jQuery resize and viewport checkpoint

javascript

css

jquery

viewport