Question

我在设计中包含了一些媒体查询，以根据浏览器的宽度更改页面某些元素的宽度。查询如下所示：

@media screen and (min-width:1024px)
@media screen and (max-width:1024px)

Chrome，Safari和Firefox效果很好，只有IE才有问题。我知道IE 9之前的所有版本都不支持此功能，但它们根本不适用于IE 9。可能是什么问题？

Answer 1

您是否已开启兼容模式？

Answer 2

确保您拥有正确的DOCTYPE声明。强烈建议网站使用HTML5文档类型，以支持最广泛的已建立和新兴标准（在这种情况下：CSS3），以及最广泛的Web浏览器：<!DOCTYPE html>

Answer 3

使用以下条件

@media only screen (min-width: 1px) and (max-width:599px)

而不是

@media only screen (max-width:599px)

并确保min-width为1px，因为IE9无法提取0px

Answer 4

不幸的是，在任何版本的IE中都不支持min-width。所以如果你使用这个约定：

<!---  CSS Selector :: Desktop --->
<link rel="stylesheet" type="text/css" href="css/desktop.css" media="screen and (min-width:960px)" label="desktop">

<!---  CSS Selector :: Tablet PC --->
<link rel="stylesheet" type="text/css" href="css/tablet.css" media="screen and (min-width:768px) and (max-width:959px)" label="tablet">

<!---  CSS Selector :: Phone --->
<link rel="stylesheet" type="text/css" href="css/phone.css" media="screen and (min-width:320px) and (max-width:499px)" label="phone">

它会忽略所有。

Reference

CSS媒体查询无法在IE 9中运行

4 个答案: