使用matchmedia.js在断点上删除/添加css类

Question

我有以下代码,当屏幕大小770px及以下(由断点确定)时,它可以正常工作:

    var handleMatchMedia = function (mediaQuery) {
      if (mediaQuery.matches) {

         $j(".view-all a").removeClass("button");
         $j(".view-all").removeClass("view-all");

    } else {

        $j(".view-all a").addClass("button");
        $j(".view-all").addClass("view-all");
    }
},

mql = window.matchMedia('all and (max-width: 770px)');

handleMatchMedia(mql); 
mql.addListener(handleMatchMedia); 

问题是当窗口调整大小时770px,我失去了我的课程.

如何在窗口调整大小时更改类？

Answer 1

猜测您要做什么是在媒体更改时通过添加类来更改设计页面。

只需使用 css 和媒体查询即可实现此目的：

@media all and (max-width: 770px) {
  .viewall a {
    color: blue;
  }
}

但如果你真的希望它也用 javascript 处理，我建议使用另一个类作为标记，例如.adapt并将代码更改为：

var handleMatchMedia = function (mediaQuery) {
    if (mediaQuery.matches) {
       $j(".adapt a").removeClass("button");
       $j(".adapt").removeClass("view-all");
    } else {
       $j(".adapt a").addClass("button");
       $j(".adapt").addClass("view-all");
    }
},

mql = window.matchMedia('all and (max-width: 770px)');

handleMatchMedia(mql); 
mql.addListener(handleMatchMedia);