CSS 媒体查询 - IE8 仍然无法运行答案

【问题标题】：CSS Media Queries - IE8 still not functionCSS 媒体查询 - IE8 仍然无法运行
【发布时间】：2013-08-31 18:14:24
【问题描述】：

提供了一个带有twitter bootstrap的网站有点粗心，我发现IE8仍然不支持媒体查询......

我谷歌并找到了两个解决方案： http://ghita.org/tipoftheday/css-media-queries-for-ie 和 http://code.google.com/p/css3-mediaqueries-js/

但两者都无法解决我的问题，如下所示： http://www.doxadigital.com/scrape/mediaqueries.html (使用 css3-mediaqueries.js) 和 http://www.doxadigital.com/scrape/mediaqueries2.html（使用 css-media-queries-for-ie.js）

知道如何解决我的问题，因为我的网站使用了多个@media

谢谢

【问题讨论】：

请始终在您的问题中包含相关代码。外部链接很棒，但如果它们不复存在，您的问题应该对其他人仍然有用。至少，包括不起作用的 css 规则。
你的 DOCTYPE 错误，试试 HTML5 的 doctype 再试一次：<!DOCTYPE html>
您说“IE8 仍然不支持媒体查询”。仅供参考，IE8 永远不会支持媒体查询。

标签： javascript html internet-explorer-8 responsive-design media-queries

【解决方案1】：

首先你需要切换到HTML5 doctype。其次，IE8 本身不支持媒体查询，因此您需要使用 JavaScript polyfill（例如 Respond）来允许响应式元素。

【讨论】：

格式似乎应该是“@media screen and....”，因为如果不添加“screen and”，脚本将不起作用。我通常使用这种格式@media (min-width:xxxx)，如引导站点所示。

【解决方案2】：

我是一名网络开发人员，我在新闻网站上使用了 bootstrap，但它在 IE8 上不起作用，我使用 css3-mediaqueries.js javascript 但仍然无法正常工作。如果您希望您的媒体查询与此 javascript 文件一起使用，请将屏幕添加到 css 中的媒体查询行

这是一个例子：

<meta name="viewport" content="width=device-width" />
<script type="text/javascript" src="css3-mediaqueries.js"></script>

<style>
     @media screen and (max-width:900px) {}
     @media screen and (min-width:900px) and (max-width:1200px) {}
     @media screen and (min-width:1200px) {}
</style>

<link rel="stylesheet" type="text/css" href="bootstrap.min.css">

css 链接行如上一行一样简单。

【讨论】：