Как реплицировать этот CSS-jquery с использованием JavaScript для поддержки IE

Question

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

Может кто-нибудь помочь мне с методом javascript / jquery для достижения того же эффекта, чтобы мой сайт поддерживал более старые версии IE?Благодаря.

Answer 1

Прежде всего вы должны использовать sth, например modernizr , чтобы проверить возможности вашего браузера (это не только IE, который не поддерживает медиазапросы), а затем настроить что-то, что прослушивает $(window).resize() и изменения ваш макет соответственно. Смотри: http://api.jquery.com/resize/

Немного похоже:

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