如何使用 javascript 复制此 css 媒体 jquery 以支持 IE

【问题标题】：How to replicate this css media jquery using javascript to support IE如何使用 javascript 复制此 css 媒体 jquery 以支持 IE
【发布时间】：2023-03-19 18:10:02
【问题描述】：

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

有人可以帮助我使用 javascript / jquery 方法来实现同样的效果，以便我的网站支持旧版本的 IE 吗？谢谢。

【问题讨论】：

您可以为您必须处理的每个版本的 IE 有条件地注释单独的样式。这不是您要求的 js 解决方案，只是一个建议。

标签： javascript jquery css html media-queries

【解决方案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
    }
  });
}

【讨论】：