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有一个很棒的教程 here 。

话虽如此，我猜你真正的问题是你在Bootstrap中缺少0到767px之间的另一个断点而感到沮丧（ like so many others are 。

我可以与你分享我的一个超级秘密技巧吗？不要试图通过查询来破解，只需标记您的页面，以便xs cols是您希望网格在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。

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

1 个答案: