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