我正试图让一些潜水者做出反应

Question

我正在尝试让一些div做出响应。实际上，这是一个joomla模块。但它没有反应。我的模板是有响应的。我把这个模块放在一个位置上，但如果调整屏幕大小，它会变大，并超出那个位置。我从第一个div（YJYC容器）开始，并将宽度设置为100%。这是一个好的开始，因为我注意到如果我调整屏幕大小，结果是"好"的。但我必须在其他潜水艇上这样做，对吧？。我应该如何继续？这是html

<div id="YJYSC_container<?php echo $container_poz ?>" style="height:<?php echo $slider_height ?>px; width:<?php echo $slider_width ?>px;">
    <!-- navigator -->
    <div id="navigator_outer" style="height:<?php echo $slider_height ?>px; width:<?php echo  $thumb_width +30 ?>px;">
        <ul id="navigator">
            <?php foreach ($yousclides as $youscslide):?>
            <li class="element" style="height:<?php echo $slider_height / $visibleItems  ?>px">
                <div class="inner" style="width:<?php echo $thumb_width + 30 ?>px;height:<?php echo $slider_height / $visibleItems   ?>px">
                    <div class="inner_over" style="width:<?php echo $thumb_width +30 ?>px;height:<?php echo $slider_height / $visibleItems -12  ?>px">
                        <div class="border_out" style="height:<?php echo $slider_height / $visibleItems -20  ?>px;width:<?php echo $thumb_width + 0 ?>px;">
                            <div class="border_in" style="height:<?php echo $slider_height / $visibleItems -20  ?>px;width:<?php echo $thumb_width + 0 ?>px;">
                                <?php if($youscslide['img_url'] != "") echo $youscslide['img_tumb']; ?>
                            </div>
                        </div>
                    </div>
                </div>
            </li>
            <?php endforeach;?>
        </ul>
    </div>
    <!-- end of navigator, start slides -->
    <div id="slides" style="height:<?php echo $slider_height ?>px; width:<?php echo $slider_width  ?>px;">
        <?php foreach ($yousclides as $youscslide):?>
        <div class="slide" style="height:<?php echo $slider_height ?>px; width:<?php echo $slider_width  ?>px;"> <a href="<?php echo $youscslide['link'] ?>" title="">
            <?php if($youscslide['img_url'] != "") echo $youscslide['img_out'] ?>
            </a>
            <div class="long_desc" style="width:<?php echo $intro_desc_width ?>;height:<?php echo $intro_desc_height ?>;<?php echo $intro_desc_pozi ?>">
                <h1><a href="<?php echo $youscslide['link'] ?>" title=""><?php echo  $youscslide['title'] ?></a></h1>
                <?php echo $youscslide['intro'] ?> <a href="<?php echo $youscslide['link'] ?>" title="" class="yousc_readon"><?php echo JText::_('YOUSC_READ') ?></a> </div>
        </div>
        <?php endforeach;?>
    </div>
</div>

Answer 1

使用此：

@media screen and (max-width: 900px) {
    #YJYSC_container, #YJYSC_container_l {
        width: 100% !important;
        height: auto !important;
    }
    #YJYSC_container_l #navigator_outer {
          position: relative !important;
          width: 100% !important;
          height: auto !important;
          margin-bottom: 20px;
    }
    #YJYSC_container #slides, #YJYSC_container_l #slides {
          width: 100% !important;
    }
    #YJYSC_container #slides div.slide, #YJYSC_container_l #slides div.slide {
        width: 100% !important;
    }
    #YJYSC_container #navigator li.element div.inner, #YJYSC_container_l #navigator li.element div.inner,
    #YJYSC_container #navigator li.element div.inner_over, #YJYSC_container_l #navigator li.element div.inner_over,
    #YJYSC_container_l #navigator li.element div.inner div.inner_over .border_out,
    #YJYSC_container #navigator li.element div.inner div.inner_over .border_in, #YJYSC_container_l #navigator li.element div.inner div.inner_over .border_in,
    #YJYSC_container #navigator li.element div.inner div.inner_over .border_in, #YJYSC_container_l #navigator li.element div.inner div.inner_over .border_in img{
        width: 100% !important;
        height: auto !important;
        float: none !important;
    }
    #YJYSC_container #navigator li.element, #YJYSC_container_l #navigator li.element {
        float: left;
        width: 33% !important;
        height: auto !important;
        clear: none !important;
    }
    #YJYSC_container #navigator, #YJYSC_container_l #navigator {
        overflow: auto !important;
    }
}

此代码在宽度小于900px的设备上触发。它仍然需要更多的工作，但反应性已经开始有意义了。

更新jsfiddle:

http://jsfiddle.net/gg9mvtrt/1/