Search code examples
javascriptjquerycsstwitter-bootstrapmedia-queries

Twitter Bootstrap - how to detect when media queries starts

which is the fastest and easy way to fire when bootstrap-responsive.css media queries go in action?

go in action = when you resize window to mobile width and site is changed to responsive mobile

hope question is clear

Solution

  • Using jquery you can find the size of current window and then accordingly do your stuff.

    $(window).resize(function() {
  if ($(this).width() >= 1280) {
    //do something
  }
  else if ($(this).width() < 1280 && $(this).width()>= 980) {
    //do something
  }
  ...
});

    CSS:: Twitter-Bootsrap-layouts

    /* Large desktop */
@media (min-width: 1200px) { ... }

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }

/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }

/* Landscape phones and down */
@media (max-width: 480px) { ... }