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％时每个区块中断并且看起来很糟糕。

我无法理解解决方案是什么。如何让它全部响应？请帮我。：（

Answer 1

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

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

另外，我不建议首先通过学习Bootstrap开始学习响应式设计，我建议你使用纯HTML＆amp; CSS首先设计一个网站模板。

YouTube上的DevTips在从头到尾设计响应式网站方面有一个很棒的播放列表https://www.youtube.com/playlist?list=PLqGj3iMvMa4KQZUkRjfwMmTq_f1fbxerI

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

有人可以解释我如何制作响应式设计吗？

1 个答案: