https://www.quora.com/How-do-I-add-and-remove-CSS-classes-using-jQuery-based-on-the-screen-size
ствуйте, друзья! Я пытаюсь динамически добавить класс в тело в зависимости от разрешения окна браузера. Вот код, который я пытаюсь использовать, но мне нужна помощь в настройке, так как я совсем не знаю jQuery.
Варианты, которые я хочу достичь:
Как только посетитель заходит на мой сайт, этот код должен проверить размер окна своего браузера и добавить класс в тело в соответствии со следующими правилами
Если размер окнабольше, чем 1024pxно меньше чем 1280px, затем добавьте класс.w1280
.
Если размер окнабольше, чем 1280pxно меньше чем 1440px затем добавьте класс.w1440
.
Если размер окнабольше, чем 1440pxно меньше чем 1280px, затем добавьте класс.w1680
.
Если размер окнабольше, чем 1680px затем добавьте класс.wLarge
.
Чтобы добиться этого, я пытаюсь использовать следующий скрипт. Мои вопросы:
Этоправильный код? Если нет, то какой код правильный?
Это лучшеекратчайший код? Если нет, то какой код будет правильным?
Пожалуйста, помогите, так как мои знания о jQuery почти нулевые.
function checkWindowSize() {
if ( $(window).width() > 1024) {
$('body').addClass('w1280');
} else {
$('body').removeClass('w1280');
}
if ( $(window).width() > 1280 ) {
$('body').addClass('w1440');
} else {
$('body').removeClass('w1440');
}
if ( $(window).width() > 1440) {
$('body').addClass('w1680');
} else {
$('body').removeClass('w1680');
}
if ( $(window).width() > 1600) {
$('body').addClass('wLarge');
} else {
$('body').removeClass('wLarge');
}
}
checkWindowSize()