Question

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

Answer 1

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

IE加载时如何使Media Query工作？

1 个答案: