Microsoft Edge，媒体查询无法正常工作 [英] Microsoft Edge, media query doesn't work correctly

问题描述

我已在Google Chrome浏览器上成功测试了此媒体查询，但是Microsoft Edge在某种程度上存在问题.这些查询有问题吗?还是仅仅是Microsoft Edge中的错误?

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

I tested this media query successfully on Google Chrome but somehow Microsoft Edge has issues with it. Is something wrong with these queries? Or is it just a bug in Microsoft Edge?

UPDATE:
It looks like Edge needs a Class without Media Query, so I added .height-fix{height:650px} and it works.

@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的设备:

This is the media query that doesn't work it should target devices with a height OVER 768px and a width OVER 1367px:

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

推荐答案

如果该类没有 fallback

这意味着，如果仅在媒体查询中指定css类，则有时可能无法正常工作.

This means that if a css class is only specified inside a media query it sometimes won't work correctly.

因此，如果CSS如下所示:

So if the CSS looks like this:

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

它不会工作. 它应该看起来像这样:

it wont work. It should to look like this:

.height-fix{
height: 100px
}

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

这篇关于Microsoft Edge，媒体查询无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！