IE加载时如何使媒体查询工作？答案

【问题标题】：How to make Media Query work when IE loads?IE加载时如何使媒体查询工作？
【发布时间】：2013-10-19 23:36:54
【问题描述】：

我的 index.htm 文件的 <head> 内的 <style> 块中有以下媒体查询......

@media screen and (min-width: 40.5em) {
  header[role="banner"]  {border:solid 1px red;}  
}

但是当页面加载时，IE10 不会在我的标题周围产生红色边框。现在，如果我从该媒体查询中取出样式，那么 IE 将在页面重新加载时处理红色边框。

在 IE10 中显示此内容并加载我的页面的秘诀是什么？

另外...我的

中有以下设置

<head>
...
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1 user-scalable=no" />
<meta http-equiv="X-UA-Compatible" content="IE=9" />
...
</head>

px 也不适合我...

@media only screen and (max-device-width: 100px) {
  header[role="banner"] {border:solid 1px red;}
}

没有出现...

更新

我知道发生了什么。在我的样式块中，我有以下 css 代码...

@media screen and (min-width: 5em) {

   //various css rules for mobile view
}

在它下面我有....

@media screen and (max-width: 40.5em) {

  //various css rules for desktop view
}

Chrome 在我的桌面浏览器上理解这一点并读取第二个媒体查询。但是 IE10 卡在第一个上。我的目标是采用移动优先的方法，但如果屏幕尺寸较大，IE 不会卡在那里。那是我的问题...

当我删除第一个媒体查询时，第二个在 IE 中工作。我怎样才能同时保留它们并让 IE 知道在更大的屏幕上忽略第一个...？

【问题讨论】：

您确定屏幕宽度超过 40.5em？
是的，我在我的台式电脑上全屏显示。
你试过用像素代替“em”吗？
如果您的分辨率为 640x480，这并不意味着什么；) 不过，请尝试使用 px，正如我上面提到的那样。
@disinfor 您的解决方案有效。如果你把它写出来作为答案，我会给你一张绿色的支票。

标签： css internet-explorer media-queries

【解决方案1】：

首先设置您的移动样式，而无需调用任何@media 查询（这些将是您的默认设置）。从那里，您可以使用@media 查询来调整更大/不同的屏幕分辨率。

【讨论】：