Javascript 响应站点不在IE中工作（尽管css3 mediaqueries.js）_Javascript_Html_Css_Responsive Design

Javascript 响应站点不在IE中工作（尽管css3 mediaqueries.js）

javascript html css responsive-design

Javascript 响应站点不在IE中工作（尽管css3 mediaqueries.js）,javascript,html,css,responsive-design,Javascript,Html,Css,Responsive Design,我正在创建一个快速响应的网站，但似乎无法在IE中运行（我正在IE8中测试）。现在，我知道InternetExplorer8及以下版本不支持CSS3媒体查询。但是我包含了css3-mediaqueries.js Javascript文件（由Google托管），但它仍然不起作用我去掉了所有代码，只留下了最小的代码（实际上只有26行HTML和34行CSS）。HTML成功验证为HTML5，CSS验证为CSS级别3。代码如下： HTML <!DOCTYPE HTML> <html>

我正在创建一个快速响应的网站，但似乎无法在IE中运行（我正在IE8中测试）。现在，我知道InternetExplorer8及以下版本不支持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>

responsive.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}

@charset "UTF-8";

#article {
    width:100%}

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

<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" />

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

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

你试过了吗

祝你好运

更新

将两个CSS文件合并为一个可能更安全。使用以下命令将移动规格添加到custom.css文件中：

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

  /* mobile CSS here */

} /* close @ media for mobile */

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

一位朋友指出，css3-mediaqueries.js Javascript文件的

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

我在HTML文件的link元素中使用了media属性。下面是我为解决这个问题所做的：

在我删除的HTML文件中：

@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}

@charset "UTF-8";

#article {
    width:100%}

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

<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" />

@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";

这就成功了。不清楚为什么字符集的顺序会产生差异？也许有人能解释一下

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

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

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

与之相比：

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

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

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

您必须将其置于任何其他元标记之前。
谢谢您的回复。我尝试在外部服务器和本地机器上链接到您通知我的JS，但没有成功。css3-mediaqueries.js JavaScript（我最初尝试过）是大多数开发人员推荐的，包括Ethan Marcotte，他在2010年创造了“响应式Web设计”一词。我到底做错了什么？现在还不要放弃respond.js；）从使用IE7或IE8开始，并更改窗口大小。如果背景颜色改变，那就好了。尝试从下载respond.js脚本并将其安装到您的站点上。我不知道为什么，但有些人在respond.js和其他人在css3-mediaquerys.js上取得了更大的成功，这对于找到解决方案来说是一件好事！