Microsoft Edge，媒体查询无法正常工作答案

【问题标题】：Microsoft Edge, media query doesn't work correctlyMicrosoft Edge，媒体查询无法正常工作
【发布时间】：2018-02-18 06:02:37
【问题描述】：

我在 Google Chrome 上成功测试了这个媒体查询，但不知何故 Microsoft Edge 存在问题。这些查询有问题吗？或者它只是 Microsoft Edge 中的一个错误？

更新：
看起来 Edge 需要一个没有媒体查询的类，所以我添加了 .height-fix{height:650px} 并且它可以工作。

@media all and (min-width:875px) and (max-width:980px) { 
.height-fix { 
  height : 610px; 
  } 
} 

@media all and (min-width:768px) and (max-width:875px) { 
.height-fix { 
  height : 575px; 
  } 
} 

@media (max-height:768px) and (min-width:1366px) and (max-width:1366px) { 
.height-fix { 
  height : 520px !important ; 
  } 
}

这是不起作用的媒体查询，它应该以height OVER 768px 和width OVER 1367px 的设备为目标：

@media (min-height:768px) and (min-width:1367px) { 
.height-fix { 
  height : 650px; //this line doesn't apply
  } 
}

【问题讨论】：

不是一个答案，但微软的 IE（Edge 的前身）在其他主要浏览器都运行时总是因 CSS 支持问题而臭名昭著。如果 Edge 遵循这一传统，我一点也不感到惊讶。

标签： css google-chrome media-queries microsoft-edge

【解决方案1】：

如果类没有回退

，Microsoft Edge 似乎在媒体查询方面存在问题

这意味着如果仅在媒体查询中指定 css 类，它有时将无法正常工作。

如果 CSS 看起来像这样：

@media (max-width(123px){
.height-fix {
  height: 650px
  }
}

它不会工作。它应该看起来像这样：

.height-fix{
height: 100px
}

@media (max-width(123px){
.height-fix {
  height: 650px
  }
}

【讨论】：