hinzufügen Breite des Bildschirms zu einer Klasse, wenn Bildschirmbreite kleiner als 960 px ist

Question

Der folgende Code Breite des Bildschirms Klasse fügt .reverse

var w = $(window).width(); 
$('.reverse').css('width', w); 

aber ich will es so nur tun, wenn die Bildschirmbreite ist weniger als 960px:

if ($(window).width() < 960) { 
    $('.reverse').css('width', w); 
} 

Der obige Code funktioniert nicht, könnten Sie einen Blick darauf werfen? Danke!

Answer 1

Versuchen mit jQuery

$(window).resize(function(){ 
    var width = $(window).width(); 
    console.log(width); 
    if (width < 960){ 
    $('.reverse').css('width', width); 
    }; 
}); 

Auf diese Weise sind Sie ständig das Fenster der Breite überprüft, während auch die Größenänderung.

Answer 2

var w = $(window).width(); 
if (w < 960) { 
    $('.reverse').css('width', w); 
} 

Hinweis: Fügen Sie bei Bedarf die Ereignisverwaltung hinzu, aber w wurde nicht definiert.

Wenn Sie das Event-Management hinzufügen, seien Sie vorsichtig, da es viel feuern wird und es am besten ist, jedes Mal einen erneuten Durchlauf zu erzwingen - schauen Sie in dieses separate Problem.

Ein Link zu einer möglichen debounce für die Resize https://www.paulirish.com/2009/throttled-smartresize-jquery-event-handler/

Answer 3

Ich glaube, Sie Fenster resizen diesen Effekt zu überprüfen, so dass Sie eventlistener, auf das DOM hinzufügen müssen die Größe neu.

$(window).on('resize',function(){ 
    var w=$(window).width(); 
    if (w< 960) { 
     $('.reverse').css('width', w); 
    } 
    }) 

Answer 4

if ($(window).width() < 960) { 
     $('.reverse').css('width', w); 
    } 

Sie initialisieren nicht w

Answer 5

Sie auch diese mit CSS und einer Medienabfrage tun können, wenn Sie Javascript

@media (max-width: 960px) { 
    .reverse { 
    width: 100vw; 
    } 
}