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

Posted 2023-03-06

【中文标题】Microsoft Edge，媒体查询无法正常工作

【英文标题】：Microsoft Edge, media query doesn't work correctly

【发布时间】：2018-02-18 06:02:37

【问题描述】：

我在 Google Chrome 上成功测试了这个媒体查询，但不知何故 Microsoft Edge 存在问题。这些查询有问题吗？或者它只是 Microsoft Edge 中的一个错误？ 更新： 看起来 Edge 需要一个没有媒体查询的类，所以我添加了 .height-fixheight: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 遵循这一传统，我一点也不感到惊讶。

【参考方案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