有没有办法在媒体查询中禁用 css 类？答案

【问题标题】：Is there a way to disable a css class in media queries?有没有办法在媒体查询中禁用 css 类？
【发布时间】：2017-01-03 14:55:51
【问题描述】：

我有一个 css 类“淡出”，如果视口宽度小于 786 像素，我想禁用它像这样的

@media only screen and (max-width: 786px) {
.fadeout {doesItWork?:noItDoesNotWork!;}
}

你看到这个类在 jquery 中做了一些关于“$(window).scrollTop();”的事情，我认为这在移动设备中不合适这里是我得到的代码，它来自https://tympanus.net/Tutorials/FixedFadeOutMenu/

//fadeout script
$(function() {
    $(window).scroll(function(){
        var scrollTop = $(window).scrollTop();
        if(scrollTop != 0)
            $('.fadeout').stop().animate({'opacity':'0.2'},400);
        else    
            $('.fadeout').stop().animate({'opacity':'1'},400);
    });

    $('.fadeout').hover(
        function (e) {
            var scrollTop = $(window).scrollTop();
            if(scrollTop != 0){
                $('.fadeout').stop().animate({'opacity':'1'},400);
            }
        },
        function (e) {
            var scrollTop = $(window).scrollTop();
            if(scrollTop != 0){
                $('.fadeout').stop().animate({'opacity':'0.2'},400);
            }
        }
    );
});

我对 javascript/jquery/plugin 持开放态度，但更喜欢仅使用 css 的解决方案

任何帮助都非常感谢提前感谢

【问题讨论】：

你试过不显示那个类@media only screen and (max-width: 768px) { .a {display: none;}}
@WhiteHox 不是很有帮助
“禁用”课程是什么意思？你能告诉我们你的代码吗？如果要隐藏元素，可以在该媒体查询中使用 display: none。如果要禁用与.A 关联的样式，可以将其原始样式包装在(min-width: 787px) 块中，或者使用默认值逐一取消其样式。
然后试试display: none !important;

标签： javascript jquery html css jquery-plugins

【解决方案1】：

为什么不使用相反的媒体查询为类定义 CSS？

@media only screen and (min-width: 787px) {
  .A {
    // style rules here.
  }
}

【讨论】：

该类在 jquery 中淡入淡出用于特殊目的再次不是很有帮助
那么你可以在 CSS 中做到这一点的唯一方法是禁用特定的样式规则，正如 VaugenWakeling 所建议的那样。您可以在开发者工具中检查类的样式规则，并相应地重新设置它们。
对，所以你的意思是没有样式规则可以禁用。使用该类只是为了可以从 JS 引用元素，对吗？如果是这样，那么不，你不能使用 CSS 做任何事情。我建议你看看Window.matchMedia。

【解决方案2】：

尝试使用 !important 禁用所需的参数

IE 大于 768 像素

.A {
    margin: 10px;
    width: 120px;
}

小于 768 像素

@media only screen and (max-width: 786px) {
.A {
margin:0px !important;
width: 120px !important;
}
}

【讨论】：

该类在 jquery 中淡入淡出用于特殊目的再次不是很有帮助

【解决方案3】：

不完全确定您所说的禁用是什么意思，但您可以使用display:none 或visibility:hidden。使用visibility:hidden，该元素仍会占用页面空间，您只是看不到它，而display:none 则根本不会呈现该元素。

【讨论】：

【解决方案4】：

@media screen and (min-width: 787px) {
    .A {
        display: none !important;  /* If you just want it hidden */
        pointer-events: none; /* If you don't want the user to be able to click */
    }
}

【讨论】：

display none 不是禁用一个类——它隐藏了那个元素
该类在 jquery 中淡入淡出用于特殊目的再次不是很有帮助
@AsifAli - 使用 StackOverflow 的有用提示：通过编辑在原始帖子/问题中添加您的说明和详细信息，而不是在提交的答案下为每个评论线程重复。