我在索引.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 知道忽略第一个更大的屏幕......？
首先设置移动样式，而不调用任何@media查询（这些查询将是默认值）。从那里，您可以使用@media查询来调整更大/不同的屏幕分辨率。