Question

我的媒体查询存在问题，因为它没有相互覆盖。第一次迭代(max-width: 960px)工作正常但第二次(max-width: 380px)不起作用，我不知道为什么。感谢帮助，谢谢。

＆＃13;

.fb {
    width: 50px;
    margin-left: 20px;
    margin-right: 20px;
}

@media only screen and (max-width: 960px) {

/* this works */

.fb {
    position: relative;
    width: 40px!important;
    margin-left: 15px!important;
    margin-right: 15px!important;                
             }
}


@media only screen and (max-width: 380px) {

/* this does not work */
.fb {

    width: 30px!important;
    margin-left: 10px!important;
    margin-right: 10px!important;               
             }
}

＆＃13;

<div class="social_container">
<a href="https://www.facebook.com/" target="_blank"><img class="fb" src= "http://placekitten.com/200/300" alt=""></a>
</div>

＆＃13;

Answer 1

您错误拼写 margin-rigth 请将其更改为 margin-right 并删除！important

.fb {
  width: 50px;
  margin-left: 20px;
  margin-right: 20px;
}
@media only screen and (max-width: 960px) {
  .fb {
    position: relative;
    width: 40px;
    margin-left: 15px;
    margin-right: 15px;
  }
}
@media only screen and (max-width: 380px) {
  .fb {
    width: 30px;
    margin-left: 10px;
    margin-right: 10px;
  }
}

<div class="social_container">
  <a href="https://www.facebook.com/" target="_blank">
    <img class="fb" src="https://i.stack.imgur.com/UzPkq.jpg" alt="">
  </a>
</div>

Answer 2

请参阅fiddle

.social_container a {
    color: red;
}

@media only screen and (max-width: 960px) {


.social_container a{
    color: green;
}

}
@media only screen and (max-width: 380px) {

.social_container a{

    color: pink;
             }
}

<div class="social_container">
<a href="https://www.facebook.com/" target="_blank">fb</a>
</div>

媒体查询不会相互覆盖

2 个答案: