jquery, ekleme/pencere genişliği eklemem/yük veya bir pencere boyutlandırılır üzerinde bir sınıf kaldırmak için çok temel bir senaryoyu yazdım

Question

değiştiğinde sınıfını kaldırın. Bunu yapmanın veya kod satırlarını azaltmak mümkün olup olmadığını daha iyi bir yolu olup olmadığını

Sadece merak ediyorum. Site daha küçük bir ekranda görüntülendiğinde

Temelde ben stilleri değiştirmek isterler. Ben

Neyse işte benim kod ... belli bir genişlikte altında gittiğinde o html etiketi için yeni sınıf eklemek için en iyi olacağını düşündüm.

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

Teşekkür

Gillian

Answer 1

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

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

Answer 2

Kullanım Medya sınıfları

, KURU kullanarak kodunu (Do not tekrar) tüm

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

    } 
} 

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

    } 
} 

Answer 3

İlk Bir işlev:

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

Answer 4

Biliyorum partiye geç kaldım, ama gerçekten gerekli olmayan $(document).ready() gibi bazı şeyleri gördüm.

Eğer tekrar tekrar a la var $window = $(window); Bu performansla yardımcı olacaktır onları aradığınız eğer seçiciler önbelleğe deneyin. Ben global kapsam dışında kalmak için bir işlev ifadesi kullanın, ancak hala benim $window ve $html önbelleğe alınmış jQuery seçili öğelere erişebilir.

Muhtemelen

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

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

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

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

biraz daha temiz, daha kolay biraz takip etmek:

(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

Answer 5

Bu sorun beni bir süre pestered aslında. Genellikle geçişler için birden fazla boyutum var. Biliyorum bu paylaşmak istedim bir düşünce yazdı:

$(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/

Answer 6

Ayrıca bence bu yöntemi kullanabilirsiniz onun takip etmek çok net: ait

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

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

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

}); 

Simple Method