0

我正在使用引导轮播，我的图像来自主干中编写的 javascript 文件。我正在使用modernizr.mq 来使图像具有响应性。但它不起作用。任何人都可以帮助我使我的轮播图像响应，因为我没有从 CSS 文件中获取它们。

我的 Modernizr.mq 代码看起来像

if (Modernizr.mq('(max-width:480px)')) {
                /*  debugger;*/
                    alert('mobile');
                    var slides = [
                        {url: 'images/stage4_mobile.jpg'},
                        {url: 'images/stage5_mobile.jpg'},
                        {url: 'images/stage6_mobile.jpg'}
                    ];
                }else if ('(max-width:768px)')
                {
                    alert('tablet');
                    var slides = [
                        {url: 'images/stage4_wide.jpg'},
                        {url: 'images/stage5_wide.jpg'},
                        {url: 'images/stage6_wide.jpg'}
                    ];
                }
                else{
                    alert('DT');
                    var slides = [
                        {url: 'images/stage4_wide1.jpg'},
                        {url: 'images/stage5_wide1.jpg'},
                        {url: 'images/stage6_wide1.jpg'}
                    ];

我的 carousel.html 文件看起来像

 <div class="carousel-image" style="background-image: url('{{url}}');"></div>
        <!-- <img src="{{url}}"  alt="" /> -->
        <div class="carousel-caption carousel-overlay"></div>
        <div class="carousel-caption deal">
            <div class="col-lg-6 col-lg-offset-1" style="line-height: 60%; left: -1.8em;">
                <img src="images/text_mainpromo.png" style="width: 60%; height: 60%">
            </div>
            <div class="col-lg-4 hidden-xs hidden-sm hidden-md" style="top: 1em; left: 5.3em;">
                <a href="#" class="btn" style="width: 180px; height: 64px;">ORDER NOW</a>
            </div>
        </div>
    </div>

我附上了部分代码本身，没有语法错误。

4

0 回答 0