我正在用Bootstrap 3构建一个简单的网站，在第一页中，我有一个带有Bootstrap Carousel的全宽页眉，可以显示三个图像。
当视口宽度 992时，它将收费另一张图片。好的，简单，这是用于此的HTML和CSS代码。
<!-- Full Page Image Background Carousel Header -->
<header id="carousel-intro" class="carousel slide page-scroll ">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-intro" data-slide-to="0" class="active"></li>
<li data-target="#carousel-intro" data-slide-to="1"></li>
<li data-target="#carousel-intro" data-slide-to="2"></li>
</ol>
<!-- Wrapper for Slides -->
<div class="carousel-inner wow bounceIn" data-wow-duration="2s">
<div class="item active">
<div id="carousel-intro-img-1" class="fill"></div>
</div>
<div class="item">
<div id="carousel-intro-img-2" class="fill"></div>
</div>
<div class="item">
<div id="carousel-intro-img-3" class="fill"></div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-intro" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#carousel-intro" data-slide="next">
<span class="icon-next"></span>
</a>
<a id="scroll-link" class="page-scroll " href="#chi">
<i class="fa fa-angle-double-down white animated infinite pulse"></i>
</a>
</header>
/*Header section*/
.carousel,
.item,
.active {
height: 100%;
}
.carousel-inner {
height: 100%;
}
.carousel-indicators{
visibility: hidden;
}
.icon-prev,.icon-next{
visibility: hidden;
}
/*Setting carousel image*/
@media screen and (max-width: 991px){
#carousel-intro-img-1{
background-image:url(../img/intro-tablet/intro1g.jpg);
background-repeat: no-repeat;
}
#carousel-intro-img-2{
background-image:url(../img/intro-tablet/intro2g.jpg);
background-repeat: no-repeat;
}
#carousel-intro-img-3{
background-image:url(../img/intro-tablet/intro3g.jpg);
background-repeat: no-repeat;
}
}
@media screen and (min-width: 992px){
#carousel-intro-img-1{
background-image:url(../img/intro-desktop/intro1g.jpg);
background-repeat: no-repeat;
}
#carousel-intro-img-2{
background-image:url(../img/intro-desktop/intro2g.jpg);
background-repeat: no-repeat;
}
#carousel-intro-img-3{
background-image:url(../img/intro-desktop/intro3g.jpg);
background-repeat: no-repeat;
}
}
.fill {
width: 100%;
height: 100%;
background-position: center;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}好的，现在当设备的方向切换到横向视图时，我需要加载用于w> 992的图像集，因此我包括了自定义的jquery mobile：
script src="js/jquery.mobile.custom.min.js"></script>
并这样写：
$(window).bind('orientationchange resize', function(event){
if(event.orientation) {
if(event.orientation == 'portrait') {
$('#carousel-intro-img-1'),css('background-image', 'url(../img/intro-tablet/intro1g.jpg)');
$('#carousel-intro-img-2'),css('background-image', 'url(../img/intro-tablet/intro2g.jpg)');
$('#carousel-intro-img-3'),css('background-image', 'url(../img/intro-tablet/intro3g.jpg)');
} else
if (event.orientation == 'landscape') {
$('#carousel-intro-img-1'),css('background-image', 'url(../img/intro-tablet-landscape/intro1g.jpg)');
$('#carousel-intro-img-2'),css('background-image', 'url(../img/intro-tablet-landscape/intro2g.jpg)');
$('#carousel-intro-img-3'),css('background-image', 'url(../img/intro-tablet-landscape/intro3g.jpg)');
}
} //event orientation
else {}
});
发生一件奇怪的事情，（我使用Chrome Web Developer工具进行了测试）上述方法适用于所有大于768px的视口尺寸，但不适用于视口尺寸小于768px的所有尺寸。
为什么？
分析Chrome日志控制台时，出现以下错误：
未捕获的ReferenceError：未定义CSS
但是当w> = 768px时仍然不会出现问题，因为一切正常。
最佳答案
在您的JavaScript中，更改
$('#carousel-intro-img-1'),css
至
$('#carousel-intro-img-1').css
在所有情况下（请注意用句号代替逗号）。