Можно ли удалить класс элемента при изменении размера экрана?

Question

Я работаю над панелью меню @, которая изначально имеет свойство ширины и когда размер экрана меньше 767 (@media screen and (max-width:767px)) Мне нужно удалить это свойство. Так что я пытаюсь реализовать это с помощью класса. height свойство указано в этом классе и хочет удалить этот класс, когда ширина меньше 767px. Можно ли удалить класс элемента при изменении размера экрана ?.

Answer 1

Вам не обязательно JavaScript, если вы хотите, чтобы изменить свойства.

Написать стиль этого класса внутри медиа-запросов, например

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

Таким образом, это свойство будет добавлено к этому элементу только на экранах больше, чем 786.

Answer 2

в основном это удалит класс blue, когда window width <= 767. это jquery кстати

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