使这个股敏感
问题描述：
有人请解释我如何使这个股敏感使用媒体查询？它实际上是一个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;
}
答
您sponsors改变高度min-height这样的：
#sponsors {
width: 100%;
min-height: 200px;
}
链接的jsfiddle：https://jsfiddle.net/AndrewL32/e0d8my79/97/ [虚拟图像使用]
附：正如您可能在小提琴中注意到的那样，因为您可以通过在包装图像的方框中添加一些padding来实现想要的效果，所以将内联边距删除。
答
当宽度不同时，您需要添加元标记以标识宽度和媒体查询以执行操作。将百分比添加到您的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;
}
}
使用一个伟大的框架，因为你刚刚开始使用响应式设计将使用引导程序，它很容易定制，以满足需求你的项目。
有一个很好的网站，以及https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
所以你想黑盒子包装他们扩大它的高度相应地在移动视图？另外，根据您的班级名称来判断，我认为您使用的是Bootstrap？ –
将代码示例添加到使用jsfiddle或类似的东西的问题是一个很好的习惯，并让我们知道您尝试了什么，以便我们可以指引您朝着正确的方向前进。 –
@Andrew，这正是我想要的。是的，我正在使用Bootstrap。 – JohnDotHR