如何使用javascript复制这个css媒体jquery来支持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

你首先应该像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
    }
  });
}