7

我正在创建一个响应式网站，但似乎无法让它在 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>

自定义.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}

响应式.css：

@charset "UTF-8";

#article {
    width:100%}

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

4 回答 4

6

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

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

相比：

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

请在此项目的 github 问题部分查看此问题 - 在尝试设置大约一个小时后 - 我的媒体查询中缺少屏幕导致它们无法被识别。

于 2013-07-19T02:03:12.747 回答
4

我终于想通了！只需更改几行代码。

有朋友指出，css3-mediaqueries.js Javascript 文件的文档是这样写的：

注意：不适用于 @import'ed 样式表（出于性能原因，您无论如何都不应该使用它）。也不会监听 and 元素的 media 属性。

我在我的 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 托管的代码感到满意。

于 2013-02-28T17:32:17.817 回答
1

你试过response.js吗？

祝你好运！

更新

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

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

  /* mobile CSS here */

} /* close @ media for mobile */
于 2013-02-28T02:03:11.850 回答
0 
<meta http-equiv="X-UA-Compatible" content="IE=9">

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

于 2015-05-15T15:40:11.513 回答