javascript - 如何使用 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

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

话虽如此，我猜您真正的问题是您对 Bootstrap 中 0 到 767 像素之间缺少另一个断点感到沮丧 ( 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。