如何使用Enquire.js动态添加和删除css类？

Question

因此，我想用Enquire.js根据媒体查询动态添加和删除一个css类，但我需要使用这些函数的帮助。

下面是我想要的伪形式：

if (screens max-width > 480px){

#thumb.removeClass('col-xs-12').addClass('col-xs-6');

}

下面是开始的thumb元素：

<div id ="thumb" class="col-xs-12 col-md-3">
    <a href="#" class="thumbnail">
      <img src="images/thumbnails/golden.jpg" class="img-rounded img-responsive" alt="...">
    </a>
  </div>

假设我已经包含了所有必要的文件，我该如何使用Enquire.js完成此操作。

Answer 1

关于使用enquire.js，有一个很棒的教程。

话虽如此，我猜你真正的问题是你对Bootstrap中在0和767px之间缺少另一个断点感到沮丧()。

我能和你分享我的一个超级秘密小把戏吗？不要试图使用enquire来破解问题，只需标记您的页面，这样xs就是您希望网格在481px和768px之间工作的方式。然后，只需添加此媒体查询：

@media (max-width:480px){ /* technically you can set this to any value you prefer that is below 767 */
    [class^="col-xs-"]{
        float:none;
        width:auto;
    }   
} 

这基本上是为网格添加了另一个断点。显然，它不会改变像响应式助手类(可见/隐藏)这样的东西，但如果你真的需要的话，你可以为这些类添加你自己的类。

因此，例如，您的标记将如下所示：

<div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
      <img src="images/thumbnails/golden.jpg" class="img-rounded img-responsive" alt="...">
    </a>
</div>

媒体查询就绪后，col xs-6的行为将类似于低于481px的col-xs-12。