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时，您将窗口的大小传递给变量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');
    };
});

修改

当您使用此变量来控制您的功能时，您仍然可以使用它，只需更改中间，如下所示：

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调整大小和视口检查点

2 个答案: