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'); 
    }; 
}); 

EDIT:

Как вы используете эту переменную, чтобы контролировать свои функции, вы можете использовать его, только изменяя середину, если, например, что:

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; 
}); 

В этом путь, вы сможете избежать вызова своих функций при каждом изменении размера.

Надеюсь, это поможет!

Answer 2

Если его только для изменения цвета тела вы лучше реализовать это с помощью чистого 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.