如何使用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
    }
  });
}