html - 有人可以向我解释如何进行响应式设计吗？

Question

我有一个问题已经很久了。我想做一个响应式网站。我使用 Bootstrap 和媒体查询。例如，这是我的代码:

<div class="row-fluid slider">
<div class="col-lg-12 col-md-12 col-sm-12">
    <div id="myCarousel" class="carousel slide" style="width: 90%; margin: 0 auto">

       <!-- Carousel items -->
       <div class="carousel-inner">
          <div class="item active" style="border:1px solid black">
                <div class="img-wrapper">
                    <img class="image img-responsive" src="<?php echo Yii::app()->request->baseUrl; ?>/images/recog/slide1.jpg" alt="First slide">
                     <div class="slider_text"><span>Закінчили складний проект?</span><br />Не забудь подякувати та запросили своїх колег на каву:)</div>
                </div>
          </div>
           <div class="item" style="border:1px solid black">
                <div class="img-wrapper">
                    <img class="image" src="<?php echo Yii::app()->request->baseUrl; ?>/images/recog/slide1.jpg" alt="First slide">
                     <div class="slider_text"><span>Закінчили складний проект?</span><br />Не забудь подякувати та запросили своїх колег на каву:)</div>
                </div>
          </div>

          <div class="item" style="border:1px solid black">
                <div class="img-wrapper">
                    <img class="image" src="<?php echo Yii::app()->request->baseUrl; ?>/images/recog/slide1.jpg" alt="First slide">
                     <div class="slider_text"><span>Закінчили складний проект?</span><br />Не забудь подякувати та запросили своїх колег на каву:)</div>
                </div>
          </div>

       </div>

           <!-- Carousel indicators -->

           <ol class="carousel-indicators">
              <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
              <li data-target="#myCarousel" data-slide-to="1"></li>
              <li data-target="#myCarousel" data-slide-to="2"></li>
           </ol>
       <!-- Carousel nav -->

       <a class="carousel-control left" href="#myCarousel" 
          data-slide="prev"><img class="image" src="<?php echo Yii::app()->request->baseUrl; ?>/images/recog/back.png"></a>
       <a class="carousel-control right" href="#myCarousel" 
          data-slide="next"><img class="image" src="<?php echo Yii::app()->request->baseUrl; ?>/images/recog/forward.png"></a>
    </div> 
    </div>
</div>

此外，我还在为每个分辨率使用媒体查询，例如:

@media only screen and (max-width:1920px) and (max-height:1080px){
.slider_text {
    float:left;
    margin-top:0%;
    margin-left:4%;
    margin-top:3%;
}

.image {
    float:left;
    border:1px solid black;
    max-width:35%;
    margin-top:3%;
}

.slider {
    height:440px;
    max-height:40%;

}

}

@media only screen and (max-width:1600px) and (max-height:1200px){
.image {
    float:left;
    border:1px solid black;
    max-width:40%;
    margin-top:3%;
}
.slider {
    height:440px;
    max-height:35%;

}

}

这是一个旋转木马。目前一切正常，但当我尝试将我的桌面放大 125% 或更多或缩小到 50% 时，每个 block 都会中断，看起来很糟糕。

我不明白解决方案是什么。如何让它全部响应？请帮我。 :(

Answer 1

如果您想测试响应能力，放大/缩小不是正确的方法。您应该改为调整浏览器窗口的大小。

我喜欢这样做的一种方式是在 Chrome 上，F12 打开侧面的 Dev Tools，然后调整主窗口的大小。开发工具会告诉您右上角的像素，您可以检查任何您喜欢的元素。

另外，我不建议从学习Bootstrap开始学习响应式设计，我建议你先使用纯HTML & CSS设计一个网站模板。

YouTube 上的 DevTips 有一个关于从头到尾设计响应式网站的精彩播放列表 https://www.youtube.com/playlist?list=PLqGj3iMvMa4KQZUkRjfwMmTq_f1fbxerI

DevTips 中的一些代码，https://github.com/DevTips/Responsive-Web-Design-Basics