使用 CSS 媒体查询在特定屏幕尺寸上定位 IE11 [重复]答案

【问题标题】：Target IE11 on specific screen sizes using CSS Media queries [duplicate]使用 CSS 媒体查询在特定屏幕尺寸上定位 IE11 [重复]
【发布时间】：2018-08-09 09:56:56
【问题描述】：

我在使用类似to this post 的 IE11 时遇到了一些问题。我有一个以特定大小（1440 像素）扩展并在 IE11 中中断的菜单。使用媒体查询，我可以使用(-ms-high-contrast: none), (-ms-high-contrast: active) 定位 IE11。但是，我只希望在某个分辨率下（> 1440px）。

我尝试了各种组合

@media screen and (min-width: 1440px) and (-ms-high-contrast: none) and (-ms-high-contrast: active)

但它们似乎不起作用

如何在 IE11 中以屏幕尺寸> 1440px 定位和元素而不影响其他浏览器或使用 JS。

【问题讨论】：

@SureshPonnukalai 是的！一分钟前发现的。在这篇文章中也添加了答案。

标签： css less media-queries internet-explorer-11

【解决方案1】：

使用 CSS：

@media(min-width: 1440px){
  .element{
    -ms-high-contrast: none;
  }
}

@media(max-width: 1440px){
  .element{
    -ms-high-contrast: active;
  }
}

记住 @media 也可以用于打印界面，所以@media screen 只是指定在屏幕上显示时要执行这些规则，但是不是在打印时。 @media 本身更广泛，适用于印刷。

使用 jQuery：

如果你想要纯 js，你可以翻译它： $( 窗口 ).width(); 要么 $( 文档 ).width(); （根据您需要的行为使用一种或另一种）您可以通过以下方式以编程方式检查 screen Sixze：

$(document).ready(function(){
      if($(window).width() > 1440){
         $('.element').addClass('msClass');
      }else{
         if($('.element').hasClass('msClass'){
              $('.element').addClass('msClass');
         }
      }
});

这仅在加载文档时有效，但您可以通过以下方式添加动态函数：

//Window resize event listener, you'll need to put the other function first if you want it to being applied when you load the view.
      $(window).resize(function(){
              //if the actual window width is greater than 1440...
              if($(window).width() > 1440){
                 //add a class to the desired element/s (this class must include the changes you want when more than 1440p)
                 $('.element').addClass('msClass');
                 //if the screen resizes below 1440p...
              }else{
                 //if the class is set before
                 if($('.element').hasClass('msClass'){
                      //remove this class
                      $('.element').addClass('msClass');
                 }
              }
        });

如果您遵循此示例，则必须创建一个名为 msClass 的类，您可以在其中放置 >1440p 时发生的任何事情。

元素与元素类相关（您甚至可以使用带有 $('#element') 的 id，专门设置在要采取此行为的元素处）。

希望对你有帮助

【讨论】：

嗨！感谢您的回答，但正如问题中所解释的那样，我试图在没有 JS/jQuery 的情况下解决这个问题
很抱歉，CSS 不是一种编程语言，所以它不能有条件地检查 -ms-high-contrast，你只能检查屏幕宽度。您是否尝试过（编辑帖子）
我不确定您想通过编辑解决什么问题，因为 -ms-high-contrast 不是我想要实现的。感谢您的输入！我刚刚发布了我在其他地方找到的答案。

【解决方案2】：

在搜索 Stack Overflow 的深度后，我管理 to find someone 时遇到了同样的问题。

使用：

@media only screen and (min-width: 1440px) { 
   _:-ms-fullscreen, :root .THECLASSNAME { width: 575px; } 
}

让它工作。

【讨论】：