使用CSS Media查询在特定屏幕尺寸上定位IE11 [重复]

Question

这个问题在这里已有答案：

• Apply only to IE 11 within media query for screen size 2回答

我有一些IE11类似to this post的问题。我有一个扩展到一定大小（1440px）的菜单，并在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)

但它们似乎不起作用

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

Answer 1

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

使用：

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

使它工作。

Answer 2

使用CSS：

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

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

请记住，@ media也可以用于打印接口，因此@media屏幕只是指定在屏幕上显示时要实现这些规则，而不是在打印时实现。 @media本身更广泛，并适用于打印。

使用jQuery：

如果你想要普通的js你可以翻译它：$（window）.width（）;或$（document）.width（）; （根据您需要的行为使用一个或另一个）您可以以编程方式检查屏幕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专门设置在您想要采取此行为的元素上）。

希望能帮助到你