Question

@media all and (max-width:1000px){
    #div {
        left: 500px;
    }
}
@media all and (min-width:1000px){
    #div {
        left: 50%;
    }
}

Can someone please help me with a javascript / jquery method for achieving this same effect so that my site will support older versions of IE? Thanks.

Answer 1

You should first of all use sth like modernizr to check your browser’s capabilities (it’s not only IE that won’t support media queries) and then set up something that listens for a $(window).resize() and changes your layout accordingly. See: http://api.jquery.com/resize/

A little like:

if (!Modernizr.mq('(max-width:1000px)'){
  $(window).bind('resize load',function(){ //the load will make the style rules apply on load as well (i.e. noone's resizing the window)
    if ($(window).width() > 1000){
      //layout big version
    } else {
      //layout small version
    }
  });
}