Question

有人可以解释一下我如何使用媒体查询使这个div响应？它实际上是一个200px高的div，上面有赞助商标志。我希望它能够做出回应。目前，徽标水平显示，但例如，它们应该在移动版本上叠加一个。

    <div id="sponsors">
      <a id="about" class="smooth"></a>
        <div class="sponsors">
            <div class="row row-centered">
                <div class="col-md-4 col-centered" style="margin-top: 40px; ">
                    <img src="img/bridgestone.png" class="hvr-pulse" style="width: 400px; margin-top: 20px;";>
                </div>
                            <div class="col-md-4 col-centered" style="margin-top: 40px;">
                    <img src="img/sparco1.png" class="hvr-pulse" style="width: 400px; margin-top: 20px;">
                </div>
                            <div class="col-md-4 col-centered" style="margin-top: 10px;">
                    <img src="img/redbull.png" class="hvr-pulse" style=" width: 300px; margin-bottom: 20px;">
                </div>
            </div>
        </div>
    </div>

#sponsors {
    width: 100%;
    height: 200px;
    background-color:  black;
    background-repeat: no-repeat;
    background-size: cover;
    }

Answer 1

将#nav-search身高改为sponsors，如下所示：

min-height

链接到jsFiddle：https://jsfiddle.net/AndrewL32/e0d8my79/97/ [虚拟图像使用]

P.S。正如您可能已经注意到的那样，内联边距被删除，因为您可以通过在包装图像的框中添加一些#sponsors { width: 100%; min-height: 200px; }来实现您想要的效果。

Answer 2

当宽度不同时，您需要添加元标记以标识宽度和媒体查询以执行操作。将百分比添加到css元素而不是像素上也是非常有用的。

HTML：

<!doctype html>
<meta name="viewport" content="width=device-width"/>

CSS：

@media screen and (min-width:761px){
    div.sponsers{
        background-color:black;
        background-repeat: no-repeat;
        background-size: cover;
    }
}

一个很好的框架，因为您刚刚开始使用响应式设计，所以它将使用Bootstrap，它可以轻松定制以满足您项目的需求。

还有一个好的网站https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

使这个div响应

2 个答案: