javascript - 如何使用Enquire.js动态添加和删除CSS类

因此，我想基于带有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做到这一点。

最佳答案

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

话虽如此，我猜测您的真正问题是，Bootstrap中没有另一个介于0到767px之间的断点，您对此感到沮丧（like so many others are）。

我可以和你分享我的一个超级秘密把戏吗？而不是尝试用enquire破解，只需标记您的页面，使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。

关于javascript - 如何使用Enquire.js动态添加和删除CSS类，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/24596683/