Jquery, добавить/удалить класс при изменении ширины окна

Я выписал очень простой script для добавления/удаления класса при загрузке или при изменении размера окна.

Мне просто интересно, есть ли лучший способ сделать это, или если можно уменьшить строки кода.

В основном я хочу иметь возможность изменять стили, когда сайт просматривается на меньшем экране. Я думал, что было бы лучше добавить новый класс в тег html, когда он переместился под определённую ширину...

В любом случае, здесь мой код.

<script type="text/javascript">
 $(document).ready( function() {
    /* Check width on page load*/
    if ( $(window).width() < 514) {
     $('html').addClass('mobile');
    }
    else {}
 });

 $(window).resize(function() {
    /*If browser resized, check width again */
    if ($(window).width() < 514) {
     $('html').addClass('mobile');
    }
    else {$('html').removeClass('mobile');}
 });

Спасибо

Джиллиан

Ответы

Ответ 1

Ну, я знаю, что опаздываю на вечеринку, но я видел такие вещи, как $(document).ready(), которые действительно не нужны.

Попробуйте кэшировать свои селекторы, если вы вызываете их снова и снова, a la var $window = $(window); Это поможет в производительности. Я использую выражение функции для инкапсуляции, чтобы я остался вне глобальной области, но все же имею доступ к моим $window и $html кэшированным элементам jQuery.

(function($) {
    var $window = $(window),
        $html = $('html');

    $window.resize(function resize(){
        if ($window.width() < 514) {
            return $html.addClass('mobile');
        }

        $html.removeClass('mobile');
    }).trigger('resize');
})(jQuery);

http://jsfiddle.net/userdude/rzdGJ/1

Вероятно, немного чище, немного легче следовать:

(function($) {
    var $window = $(window),
        $html = $('html');

    function resize() {
        if ($window.width() < 514) {
            return $html.addClass('mobile');
        }

        $html.removeClass('mobile');
    }

    $window
        .resize(resize)
        .trigger('resize');
})(jQuery);

http://jsfiddle.net/userdude/rzdGJ/2

Ответ 2

Использование классов мультимедиа

@media screen and (max-width: 900px) {
  .class {
    width:800px;

  }
}

@media screen and (max-width: 500px) {
      .class {
        width:450px;

  }
}

Ответ 3

Прежде всего, DRY (Do not Repeat Yourself) ваш код, используя функцию:

function checkWidth(init)
{
    /*If browser resized, check width again */
    if ($(window).width() < 514) {
        $('html').addClass('mobile');
    }
    else {
        if (!init) {
            $('html').removeClass('mobile');
        }
    }
}

$(document).ready(function() {
    checkWidth(true);

    $(window).resize(function() {
        checkWidth(false);
    });
});

Ответ 4

Вы также можете использовать этот метод. Я думаю, что его очень понятно:

$(window).on('resize', function(){
      var win = $(this);
      if (win.width() < 514) { 

      $('html').addClass('mobile');

      }
    else
    {
        $('html').removeClass('mobile');
    }

});

Простой метод

Ответ 5

function resize() {
    if ($(window).width() < 514) {
     $('html').addClass('mobile');
    }
    else {$('html').removeClass('mobile');}
}

$(document).ready( function() {
    $(window).resize(resize);
    resize();
});

Ответ 6

Эта проблема надолго задержала меня. Я обычно имею несколько размеров для переходов. Я написал эту мысль, которую я бы разделил:

$(function() {
  var pageTransitions = [['full',1600],['mobile',800],['tiny',400],['micro',0]]; // number shows minimum size - must be from high to low
  function resize() {
    var target = 0,
        w = $(window).width(),
        h = $('html');
    $.each(pageTransitions, function(index, pageTransition) {
        if( w > pageTransition[1]) {
            target = index;
            return false;
        }
    });
    $.each(pageTransitions, function(index, pageTransition) {
        h.removeClass(pageTransition[0]);
    });
    h.addClass(pageTransitions[target][0]);
  }
  resize();
  jQuery(window).on('resize', function() {
    resize();
  });
});

http://jsfiddle.net/mckinleymedia/ERZ3q/7/