是否可以在更改屏幕尺寸时删除元素的 class？

Question

我正在开发一个菜单栏@，它最初的宽度为属性，当屏幕尺寸小于 767(@media screen and (max-width:767px)) 时，我需要删除它 property.so 我正在尝试使用 class.the 高度属性在此 class 中指定并希望在宽度小于 767px 时删除 class .是否可以在更改屏幕尺寸时删除元素的class？

Answer 1

基本上这将在 window width <= 767 时删除 class blue。这是 jquery 顺便说一句

$(window).resize(function(){

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

JSfiddle

Answer 2

如果您只想更改属性，则不一定需要 javascript。

在媒体查询中写入 class 的样式，例如

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

所以这个属性将仅在大于 786 的屏幕上添加到该元素。

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>

是否可以在更改屏幕尺寸时删除元素的 class？

Is it possible to remove class of an element when change the screen size?

css

media

class

screen-size