javascript – 响应式网站在IE中不起作用(尽管css3-mediaqueries.js)

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

解决方法

除了无法使用@imported样式表(github和google代码项目中记录) – 如果没有以类似于以下格式明确说明媒体查询,则会出现问题：

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

相比：

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

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

原文链接：https://www.f2er.com/js/150105.html

javascript – 响应式网站在IE中不起作用(尽管css3-mediaqueries.js)

解决方法

猜你在找的JavaScript相关文章