Est-il possible de supprimer la classe d'un élément quand changer la taille de l'écran?

Question

Je travaille sur une barre de menu @ qui initialement a une propriété width et quand la taille de l'écran est inférieure à 767 (@media screen and (max-width:767px)) j'ai besoin de supprimer cette propriété. Donc j'essaye de l'implémenter en utilisant une classe. La propriété height est spécifiée dans cette classe et vous souhaitez supprimer cette classe lorsque la largeur est inférieure à 767px. Est-il possible de supprimer la classe d'un élément lorsque la taille de l'écran est modifiée?

Answer 1

Vous ne devez pas nécessairement javascript si vous ne souhaitez modifier les propriétés.

Écrivez le style de cette classe à l'intérieur d'une requête de médias, par exemple

@media screen and (min-width:768px){ 
// i am usign MIN-WIDTH:786px not MAX-WIDTH 
.yourclass{ 
float: right; 
} 
} 

Donc, cette propriété sera ajouté à cet élément uniquement sur les écrans supérieur à 786.

Answer 2

fondamentalement cela va supprimer la classe blue lorsque window width <= 767. c'est jquery BTW

$(window).resize(function(){ 

     if($(window).width() <= 767){ 
     $('.blue').removeClass('blue'); 
     } 
    }); 

JSfiddle

Answer 3

alert($(window).width()); 
 

 
if($(window).width() > 500) { 
 
     $('#body').addClass('limit1200'); 
 
     $('#body').removeClass('limit400'); 
 
    }else{ 
 
     $('#body').addClass('limit400'); 
 
     $('#body').removeClass('limit1200'); 
 
    }

.limit400 h1 { font-size:10px; } 
 
.limit1200 h1 { font-size:50px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="body" class="limit400"> 
 
    <h1>Hey :D</h1> 
 
</div>