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>

Answer 2

你可以通过简单的CSS尝试这个

而不使用媒体查询

html代码

<div class="col-sm-5">
<div class="social-icons">
<a href="" target="new" title="facebook"><img src="http://icons.iconarchive.com/icons/yootheme/social-bookmark/48/social-facebook-box-blue-icon.png" alt="facebook" /></a>
<a href="" target="new" title="twitter"><img src="http://icons.iconarchive.com/icons/yootheme/social-bookmark/48/social-twitter-box-blue-icon.png" alt="twitter" /></a>
<a href="" target="new" title="instagram"><img src="http://icons.iconarchive.com/icons/uiconstock/socialmedia/48/Instagram-icon.png" alt="instagram" /></a>
<a href="" target="new" title="gmail" class="last"><img src="http://icons.iconarchive.com/icons/cornmanthe3rd/plex/48/Communication-gmail-icon.png" alt="gmail" /></a>
<div class="clr"></div>
</div>
</div>

css

.social-icons a {
float: left;
margin: 0 5px 0 0;
}
.social-icons a img {
width: 29px;
height: 27px;
}
.clr {
clear: both;
}
.last {
margin-right: 0px !important;
}

Answer 3

以下是展示如何做的示例。

当屏幕小于660px和440px宽时，它有2个媒体查询。

也要注意他们在CSS中的顺序。 640px规则出现在440px规则之前，即使440px规则启动也有效，这意味着640px查询中的规则需要在440px中再次更改，如果它们应该不同。

使用this fiddle并使用不同的设置，调整窗口大小并查看会发生什么。

旁注：

如果您不习惯摆弄，可以通过拖动边框来调整内部窗口的大小，这样可以轻松测试页面的更改方式。只需按左上角的“运行”和/或“更新”，即可重新加载或保存上次代码更改。

html, body {
  margin: 0
}

.header {
  min-width: 380px;
  padding: 10px;
  border-bottom: 1px solid #999;
}

.container {
  padding: 10px;
  white-space: nowrap;
}

.header .col {
  display: inline-block;
  width: 33%;
}
.header .col:nth-child(2) {
  text-align: center
}
.header .col:nth-child(3) {
  text-align: right
}

.header .col:nth-child(1) img {
  width: 100%;
  height: 30px;
}

.container .row {
  margin-bottom: 10px;
}

.container .row span {
  margin-left: 10px;
  vertical-align: top;
}


@media (max-width: 660px){

  .header .col:nth-child(1) {
    display: block;
    width: auto;
  }

  .header .col:nth-child(2) {
    text-align: left;
    width: 50%;
  }

  .header .col:nth-child(3) {
    width: 50%;
  }

  .header .col:nth-child(2) img {
    width: 20%;
    height: 30px;
  }

}

@media (max-width: 440px){

  .header .col:nth-child(1),
  .header .col:nth-child(2),
  .header .col:nth-child(3) {
    display: block;
    width: auto;
    text-align: left
  }

  .header .col:nth-child(2) img {
    width: 24%;
  }

  .container .row span {
    display: block;
    margin-left: 0;
    margin-top: 10px;
  }
  
}

<div class="header">
  <div class="col">
    <img src="http://placehold.it/100x30/?text=logo" />    
  </div><div class="col">
    <img src="http://placehold.it/30x30" />    
    <img src="http://placehold.it/30x30" />    
    <img src="http://placehold.it/30x30" />    
    <img src="http://placehold.it/30x30" />    
  </div><div class="col">
    <img src="http://placehold.it/60x30/?text=cart butt" />    
  </div>
</div>


<div class="container">
  <div class="row">
    <img src="http://lorempixel.com/150/100/sports" />
    <span> Some text ... being aligned at the top</span>
  </div>
  <div class="row">
    <img src="http://lorempixel.com/150/100/city" />
    <span> Some text ... being aligned at the top</span>
  </div>
</div>

如何使div内部div响应

3 个答案: