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

Question

So I want to add and remove a css class dynamically based on a media query with Enquire.js but I need help with using the functions.

Here is what I want in sort of pseudo form:

if (screens max-width > 480px){

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

}

Here is the thumb element to start with:

<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>

How do I do this with Enquire.js assuming I have included all the necessary files.

Answer 1

There's a great tutorial here on using enquire.js.

Having said that, I'm guessing that your real issue is that you are frustrated ( like so many others are ) by the lack of another breakpoint in Bootstrap between 0 and 767px.

Can I share one of my super-secret tricks with you? Instead of trying to hack things with enquire, just mark up your page so that the xs cols are how you want the grid to work between 481px and 768px. Then, just add this media query:

@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;
    }   
} 

What this does is basically adds another breakpoint for the grid. Obviously, it won't change things like the responsive helper classes (visible/hidden), but you could add your own classes for those if you really need it.

So, for example, your markup would look like this:

<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>

With that media query in place, the col-xs-6 will behave like col-xs-12 below 481px.