html - 如何使div的内部div响应

Question

我知道在相关主题上有数百万个类似的问题，而且我已经阅读了其中的很多，但不知何故我仍然不明白如何根据媒体定位 div 或不同的东西。

事情是这样的。我有一个 div，它有 4 个不同的 div，基本上只是 4 个不同的社交栏图片。我想让它们响应所有媒体，但最重要的是响应移动设备。

如果有好心人可以一步步教我怎么做，我会非常高兴。

所以我的代码现在看起来像这样。

HTML

<div class="col-sm-5" id="social-bar">
    <div class="pic1"></div>
    <div class="pic2"></div>
    <div class="pic3"></div>
    <div class="pic4"></div>
</div>

CSS

#social-bar
{
float:left;
display: inline-flex;
margin-top: 60px;
}
.pic1
{
background: url('../image/facebook.png') no-repeat;
width:29px;
height:27px;
margin-left: 180px;
}
.pic2
{
background: url('../image/twitter.png') no-repeat;
width:29px;
height:27px;
margin-left: 20px;
}
.pic3
{
background: url('../image/instagram.png') no-repeat;
width:29px;
height:27px;
margin-left: 20px;
}
.pic4
{
background: url('../image/gmail.png') no-repeat;
width:29px;
height:27px;
margin-left: 20px;
}

这是我到目前为止尝试过的方法，但它似乎不起作用

@media screen and (max-width: 350px){
.pic1{
    background: url('../image/facebook.png');
}
}
@media screen and (max-width: 350px){
.pic2{
    background: url('../image/twitter.png');
}
}
@media screen and (max-width: 350px){
.pic3{
    background: url('../image/instagram.png');
}
}
@media screen and (max-width: 350px){
.pic4{
    background: url('../image/gmail.png');
}
}

社交栏目前的定位是这样的

任何输入将不胜感激，谢谢你们!

Answer 1

阅读更多关于 media queries 的信息和响应式网页设计 here和 here

检查 fiddle

<div class="abc">
<div class="bcd">
    <a href="#">
    <img class="img1" width="50" height="50"/>
    </a>
    <a><h3>Some Text</h3></a> 
</div>
<div class="bcd">
    <a href="#">
    <img class="img1" width="50" height="50"/>
    </a>
    <a><h3>Some Text</h3></a> 
</div>
<div class="bcd">
    <a href="#">
    <img class="img1" width="50" height="50"/>
    </a>
    <a><h3>Some Text</h3></a> 
</div>
<div class="bcd">
    <a href="#">
    <img class="img1" width="50" height="50"/>
    </a>
    <a><h3>Some Text</h3></a> 
</div>   
</div>


<style>
.abc{padding:0; margin:0; box-sizing:border-box; width:100%;}
.bcd{display:inline-block;width:24%;}
@media all and (max-width: 360px){
    .bcd
    {
        display:inline-block;
        width:49%;
    }
}
</style>