响应式站点在 IE 中不起作用（尽管有 css3-mediaqueries.js）答案

【问题标题】：Responsive Site Not Working In IE (Despite css3-mediaqueries.js)响应式站点在 IE 中不起作用（尽管有 css3-mediaqueries.js）
【发布时间】：2013-02-14 01:48:43
【问题描述】：

我正在创建一个响应式网站，但似乎无法让它在 IE 中运行（我正在 IE8 中进行测试）。现在，我知道 Internet Explorer 8 及更低版本不支持 CSS3 媒体查询。但我包含了 css3-mediaqueries.js Javascript 文件（由 Google 托管），它仍然无法正常工作。

我删除了所有代码，只剩下最少的代码（实际上只有 26 行 HTML 和 34 行 CSS）。 HTML 成功验证为 HTML5，CSS 验证为 CSS 级别 3。代码如下：

HTML

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1.0" />
<title>Responsive Site</title>
<link rel="stylesheet" type="text/css" href="css/custom.css" />
<link rel="stylesheet" type="text/css" media="only screen and (min-width:50px) and (max-width: 800px)" href="css/responsive.css" />

<!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<!-- css3-mediaqueries.js for IE less than 9 -->
<!--[if lt IE 9]>
    <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

</head>
<body>
<div class="wrapper">
    <div id="article">&nbsp;</div>
    <div id="side">&nbsp;</div>
</div>
</body>
</html>

custom.css：

@charset "UTF-8";

/*html5 display rule*/
article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {display: block;}

body {margin: 0px; padding:0px}

.wrapper {
    width:78%; 
    margin:0 auto}

#article {
    float:left;
    width:61.224489795%;
    margin:20px 0 0 0;
    padding:0;
    height:500px;
    background-color:#000}

#side {
    float:right;
    width:30.775510204%;
    margin:20px 0 0 0;
    padding:0;
    height:500px;
    background-color:#999}

responsive.css：

@charset "UTF-8";

#article {
    width:100%}

#side {
    width:100%;
    clear:left}

【问题讨论】：

标签： javascript html css responsive-design

【解决方案1】：

除了无法使用@imported 样式表（在 github 和 google 代码项目中记录）之外 - 如果没有以类似于以下格式的格式明确说明媒体查询，则会出现问题：

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

相比：

@media and (min-width: 666px) and (max-width: 1000px)

请在此项目的 github 问题部分查看此问题 - 在尝试设置大约一个小时后 - 我的媒体查询中缺少 screen 导致它们无法显示认可。

【讨论】：

【解决方案2】：

我终于明白了！只需更改几行代码。

有朋友指出，css3-mediaqueries.js Javascript 文件的documentation 内容如下：

注意： 不适用于 @import'ed 样式表（您不应使用无论如何出于性能原因）。也不听媒体和元素的属性。

我在我的 HTML 文件的链接元素中使用了 media 属性。所以，这是我为解决这个问题所做的：

在我删除的 HTML 文件中：

<link rel="stylesheet" type="text/css" media="only screen and (min-width:50px) and (max-width: 800px)" href="css/responsive.css" />

并将其替换为：

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

然后我将媒体属性添加到我的 responsive.css 文件中：

@charset "UTF-8";
@media screen and (max-width: 800px) {
#article {
    width:100%}

#side {
    width:100%;
    clear:left}
}

但是还是不行。然后我在我的 responsive.css 文件中更改了媒体和 @charset 属性的顺序。我只是重新排列了第 1 行和第 2 行：

@media screen and (max-width: 800px) {
@charset "UTF-8";

成功了。不确定为什么字符集的顺序会有所不同？也许有人可以对此有所了解。

感谢大卫提供的有用建议！在工具棚中有几个选项很好，将来我可能会转向respond.js。但就目前而言，我对 Google 托管的代码感到满意。

【讨论】：

很高兴找到解决方案！

【解决方案3】：

你试过respond.js 吗？

祝你好运！

更新

将两个 CSS 文件合并为一个可能更安全。将移动规范添加到您的 custom.css 文件中：

@media (min-width: 50px) and (max-width: 800px) {  

  /* mobile CSS here */

} /* close @ media for mobile */

【讨论】：

感谢您的回复。我尝试在外部服务器以及我的本地计算机上链接到您通知我的 JS，但无济于事。 css3-mediaqueries.js JavaScript（我最初尝试的）是大多数开发人员推荐的，包括 Ethan Marcotte，他在 2010 年创造了响应式网页设计这个术语：Responsive Web Design History。我到底做错了什么？
暂时不要放弃 respond.js ;) 首先使用 IE7 或 IE8 转到 scottjehl.github.com/Respond/test/test.html 并更改窗口大小。如果背景颜色发生变化，那很好。尝试从raw.github.com/scottjehl/Respond/master/respond.min.js 下载respond.js 脚本并将其安装在您的站点上。我不知道为什么，但有些人使用 response.js 和其他人使用 css3-mediaqueries.js 更成功

【解决方案4】：

<meta http-equiv="X-UA-Compatible" content="IE=9">

您必须将它放在任何其他元标记之前。

【讨论】：