0

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

@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 知道在更大的屏幕上忽略第一个...？

4

1 回答 1

1

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

于 2013-10-11T21:07:15.190 回答