respond.js不工作IE8 - 甚至在Web服务器上 [英] respond.js not working IE8 - even on web server
问题描述
我有附加的代码所有设置运行在IIS下的localhost只是一个简单和简单的静态网站）。一切都适用于Chrome，FF，Safari但不是IE（我使用版本8）
我是前端开发的新手，我似乎无法解决它是我做错了。请有人看看，给我任何指针？
感谢您的时间，
Barry。
HTML文件;
<！DOCTYPE html PUBLIC - // W3C // DTD XHTML 1.0 Transitional // ENhttp： www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
< html xmlns =http://www.w3.org/1999/xhtml>
< head>
< meta http-equiv =Content-Typecontent =text / html; charset = UTF-8/>
< title>媒体查询测试< / title>
< link rel =stylesheettype =text / csshref =css.css/>
< / head>
< body>
< div class =wrapper one>如果查看区域小于600像素，此框将变为粉红色< / div>
< div class =wrapper two>如果查看区域大于900像素，此框将变为橙色< / div>
< div class =wrapper three>如果查看区域在600像素和900像素之间，此框将变为蓝色< / div>
< div class =wrapper iphone>此框仅适用于设备宽度为480像素（即iPhone）的设备< / div>
< p class =view-area>
< strong>您当前的查看区域是：< / strong>
< span class =lt600>小于600像素< / span>
< span class =bt600-900> 600 - 900像素< / span>
< span class =gt900>大于900像素< / span>
< / p>
< script src =/ js / respond.min.js>< / script>
< / body>
< / html>
CSS档案;
.wrapper {
border：solid 1px＃666;
padding：5px 10px;
margin：40px;
}
.viewing-area span {
color：＃666;
display：none;
}
/ * max-width * /
@media屏幕和（max-width：600px）{
.one {
background：＃ F9C;
}
span.lt600 {
display：inline-block;
}
}
/ * min-width * /
@media屏幕和（min-width：900px）{
.two {
background：＃F90;
}
span.gt900 {
display：inline-block;
}
}
/ * min-width& max-width * /
@media screen和（min-width：600px）and（max-width：900px）{
.three {
background：＃9CF;
}
span.bt600-900 {
display：inline-block;
}
}
/ *最大设备宽度* /
@media屏幕和（max-device-width：480px）{
.iphone {
background：#ccc;
}
}
链接到respond.js我正在使用of; https://github.com/scottjehl/Respond/blob /master/dest/respond.min.js ）
< ; script src =/ js / respond.min.js>< / script>
应该是
< script src =js / respond.min.js>< / script>
注意，我已删除前面的/
我现在是拳头抽空的空气，因为我有媒体查询在IE 8。
感谢您的时间。我希望这有帮助！
I'm trying to use/ mock media queries in IE8 using respond.js
I have the attached code all set-up to run under localhost in IIS (just a plain and simple static site). Everything works on Chrome, FF, Safari but not IE (I'm using version 8)
I'm new to front end development and I cannot seem to work out what it is I am doing wrong. Please can somebody take a look and give me any pointers?
Thank you for your time,
Barry.
HTML File;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Media Query Test</title>
<link rel="stylesheet" type="text/css" href="css.css" />
</head>
<body>
<div class="wrapper one">This box will turn to pink if the viewing area is less than 600px</div>
<div class="wrapper two">This box will turn to orange if the viewing area is greater than 900px</div>
<div class="wrapper three">This box will turn to blue if the viewing area is between 600px and 900px</div>
<div class="wrapper iphone">This box will only apply to devices with max-device-width: 480px (ie. iPhone)</div>
<p class="viewing-area">
<strong>Your current viewing area is:</strong>
<span class="lt600">less than 600px</span>
<span class="bt600-900">between 600 - 900px</span>
<span class="gt900">greater than 900px</span>
</p>
<script src="/js/respond.min.js"></script>
</body>
</html>
CSS File;
.wrapper {
border: solid 1px #666;
padding: 5px 10px;
margin: 40px;
}
.viewing-area span {
color: #666;
display: none;
}
/* max-width */
@media screen and (max-width: 600px) {
.one {
background: #F9C;
}
span.lt600 {
display: inline-block;
}
}
/* min-width */
@media screen and (min-width: 900px) {
.two {
background: #F90;
}
span.gt900 {
display: inline-block;
}
}
/* min-width & max-width */
@media screen and (min-width: 600px) and (max-width: 900px) {
.three {
background: #9CF;
}
span.bt600-900 {
display: inline-block;
}
}
/* max device width */
@media screen and (max-device-width: 480px) {
.iphone {
background: #ccc;
}
}
Link to respond.js I am using (local version of; https://github.com/scottjehl/Respond/blob/master/dest/respond.min.js)
<script src="/js/respond.min.js"></script>
Should have been
<script src="js/respond.min.js"></script>
Note I have removed the preceeding "/"
I am now "fist pumping" the air as I have media queries in IE 8.
Thanks for your time. I hope this helps!
这篇关于respond.js不工作IE8 - 甚至在Web服务器上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
