Question

当 @media屏幕和（max-width：500px）处于活动状态时，删除课程 .fade 。我怎样才能做到这一点？我的剧本如下。

@media screen and (max-width: 500px) {
    .post_profile_image{
        width:35px;
        height:35px
    }
    .fade{
    /* Remove this class */
    }
}

<div id="myModal" class="modal fade" role="dialog">

Answer 1

如何使用媒体查询删除课程

你没有。相反，您可以定义适用于执行您想要完成的样式的类的新规则。媒体查询无法向元素添加或删除类，它们只是更改了适用于元素的规则。

Answer 2

$(window).resize(function(){
 If($(window).width()<500){
  $('.fade').removeClass('fade');
 }
});

Answer 3

只使用CSS，您无法将其从DOM中删除..但是..您可以覆盖它。只需在正确的位置定义该类。

在jsFiddle中调整HTML框的大小。

DEMO：jsFiddle

HTML

<div id="myModal" class="modal fade" role="dialog">

CSS：

.fade { 
     opacity: 0; 
     transition: opacity 0.15s linear;
     -o-transition: opacity 0.15s linear; 
     -webkit-transition: opacity 0.15s linear; 
}

.fade:hover {
    opacity: 1
}

@media screen and (min-width: 0px) and (max-width: 500px) {
    .post_profile_image{
        width:35px;
        height:35px
    }
    .fade{
        transition: none;
        -o-transition: none; 
        -webkit-transition: none; 
    }

}

Answer 4

检查此代码。希望对你有帮助。

   $(window).on('resize', function(){
              var win = $(this); //this = window
              if (win.width()< 500) { $('#myModal').removeClass('fade'); }
         });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <div id="myModal" class="modal fade" role="dialog">Hello there</div>

Answer 5

你可以更轻松地做到这一点，检查这个

if($(".toChange").css("border-block-color") == "rgb(0, 0 , 0)"){

$(".toChange").removeClass("toQuit")

}

//Basic, if the ".toChange" element has a property in css that is equal to "rgb(0, 0, 0)" that is the way to refer to black color. We proceed to execute the next block.

// In the next Block we use .removeClass("name_of_class_what_we_wanna_destroy") to quit the "toQuit" class when this happen

@media (min-width: 1900px){
.toChange{
  border-block-color:aliceblue!important;
  }
}

/* we use media screen to send a style that the browser won't show, but the jquery can read, so this is easier way, don't you worry, the property border-block-color is almost invisible, it's only used to make one change when the window's size be = than what when are looking for to quit the class

- less Css 
- less JQuery 
+ More production

*/

<div class="toChange toQuit">
</div>
<!-- We wanna quit the "toQuit" class when window size is > than 1900px -->

希望能帮助到任何人:D

Answer 6

$(function(){
    $(window).on('resize', function(){
        if(window.innerWidth < 500){
            $('#slide-menu').removeClass('fade');
            
        }
    });
});

如何使用媒体查询删除类

6 个答案: