我在设计中包含了一些媒体查询,以根据浏览器的宽度更改页面某些元素的宽度。查询如下所示:
@media screen and (min-width:1024px)
@media screen and (max-width:1024px)
Chrome、Safari 和 Firefox 运行良好,只有 IE 是个问题。我知道 IE 9 之前的所有版本都不支持此功能,但它们在 IE 9 中根本不起作用。可能是什么问题?
我在设计中包含了一些媒体查询,以根据浏览器的宽度更改页面某些元素的宽度。查询如下所示:
@media screen and (min-width:1024px)
@media screen and (max-width:1024px)
Chrome、Safari 和 Firefox 运行良好,只有 IE 是个问题。我知道 IE 9 之前的所有版本都不支持此功能,但它们在 IE 9 中根本不起作用。可能是什么问题?
你有打开兼容模式吗?
确保您有正确的 DOCTYPE 声明。强烈建议网站使用 HTML5 文档类型,以支持最广泛的既定标准和新兴标准(在本例中:CSS3),以及最广泛的网络浏览器: <!DOCTYPE html>
使用以下条件
@media only screen (min-width: 1px) and (max-width:599px)
代替
@media only screen (max-width:599px)
并确保IE9 不min-width
拾取1px
0px
不幸的是,任何版本的 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">
它会忽略这一切。
参考。