Add/remove CSS 976px 宽度后的样式？

Question

/*Fade in effect & one pager*/
.fullpage-wrapper {
    width: 100%!important;
    transform: none!important;
}

.fp-section {
    width: 100%!important;
    position: absolute;
    left: 0;
    top: 0;
    visibility: hidden;
    opacity: 0;
    z-index: 0;
    transition: all .7s ease-in-out;
}

.fp-section.active {
    visibility: visible;
    opacity: 1;
    z-index: 1;
}
/* Remove transition when website is still loading */
body {display:none}
body[class*="fp-viewing-"] {display:block}

我想为移动用户删除宽度低于 976 像素的这些给定样式。如何在 javascript 或 jquery 中完成此操作？也可以让 else 打开吗？

if ($(window).width() < 967) {
   *remove these styles but how?*
}
else {
   *keep them/or do nothing*
}

Answer 1

您可以只使用 css:

@media only screen and (min-width : 967px) {
    /*Your styles */
}

Answer 2

@media only screen and (max-width: 967px) {
    .fullpage-wrapper {
        width: 100%!important;
        transform: none!important;
    }

.    fp-section {
        width: 100%!important;
        position: absolute;
        left: 0;
        top: 0;
        visibility: hidden;
        opacity: 0;
        z-index: 0;
        transition: all .7s ease-in-out;
    }

    .fp-section.active {
        visibility: visible;
        opacity: 1;
        z-index: 1;
    }
    /* Remove transition when website is still loading */
    body {display:none}
    body[class*="fp-viewing-"] {display:block}
}

Answer 3

这里是使用 jQuery https://jsfiddle.net/my5Luevc/

的解决方案

$(window).resize(function(){
  if ($(window).width() < 967) {
    $('div').addClass('width976');
  }
  else {
     $('div').removeClass('width976');
  }
});

div {
  height: 100px;
  width: 100px;
  border: 1px solid #ccc;
}

.width976{
  background: rgba(255,0,0,0.4);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>

在调整屏幕大小时，您可以看到正在动态添加和删除 class。

希望对您有所帮助。

Answer 4

如果您正在使用 fullPage.js and the fadingEffect extension，正如您的代码和标签似乎指出的那样，那么您可以使用 fullPage.js 回调和函数以正确的方式解决此问题：

$('#fullpage').fullPage({
    responsiveWidth: 976,
    afterResponsive: function(isResponsive){
        if(isResponsive){
            $.fn.fullpage.fadingEffect.turnOff();
        }
        else{
            $.fn.fullpage.fadingEffect.turnOn();
        }
    }
});

Add/remove CSS 976px 宽度后的样式？

Add/remove CSS styles after 976px width?

javascript

jquery

html

css

fullpage.js