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