html - 在 css 中使用@media 时，样式优先于骑行样式

Question

所以我有一个菜鸟问题，一个让我非常恼火的问题。所以我有以下类型的样式表:

#content .post-content .row .col-md-6 .box-top {
  background: #714f46;
  padding: 10px;
  color: #fff;
  text-align: center;
  font-family: "custom-script";
  position: relative;
  height: 52px;
  font-size: 34px;
  padding-top: 12px;
}

@media (min-width: 960px) {

}

@media (min-width: 768px) {
}

@media (min-width: 640px) {
  #content .post-content .row .col-md-6 .box-top {
    width: 453px;
  }
}

@media (min-width: 480px) {
  #content .post-content .row .col-md-6 .box-top {
    width: 353px;
  }
}

现在的问题是任何超过 641px 的东西都将使用 640px 规则。即使屏幕是 1920x1200。我认为这是因为我没有为原始元素定义宽度？如果是这样的话，我在 453px 的原始元素上设置了一个宽度:

#content .post-content .row .col-md-6 .box-top {
  ...
  width: 453px;
}

但问题是，它几乎就像 @media 规则具有优先权，因为在宽度为 1366px 的 crhome 检查器中，它仍然使用 640px 规则而不是我刚刚定义的宽度。现在我在想，而不是做: (min-width: xyzpx) 我会使用 max-width 但这似乎采取了一种平滑缩小的方式影响客户想要，他们不希望它在媒体尺寸之间跳跃。

我的元素是否应该有 453px 的 max-width 来覆盖 @media 规则？

#content .post-content .row .col-md-6 .box-top {
  ...
  max-width: 453px; /** or a min-width: 453px **/
}

基本上我的问题是:

为什么我的@media 规则覆盖了页面上的任何其他规则。在这种情况下，当相关元素的原始定义未指定宽度时，为什么要使用 640 规则中的宽度来应用于上述任何内容？

和

为什么当我为元素的原始定义指定宽度时，定义新宽度为 640px 的 @media 规则会覆盖它，尤其是当窗口宽度为 1366px 时？

Answer 1

据我了解，您的问题是您想要应用非移动优先方法，并且通过使用它您必须使用max-width 而不是 min-width

像这样:

/*==========  Non-Mobile First Method  ==========*/

    @media only screen and (max-width : 960px) {
      /*your CSS Rules*/     
    }
    @media only screen and (max-width : 768px) {
      /*your CSS Rules*/     
    }
    @media only screen and (max-width : 640px) {
      /*your CSS Rules*/     
    }
    @media only screen and (max-width : 480px) {
      /*your CSS Rules*/     
    }       
    @media only screen and (max-width : 320px) {
      /*your CSS Rules*/ 
    }

或者，如果您想使用移动优先方法，那么您应该使用min-width，但是这样:

/*==========  Mobile First Method  ==========*/

    @media only screen and (min-width : 320px) {
      /*your CSS Rules*/     
    }
    @media only screen and (min-width : 480px) {
      /*your CSS Rules*/     
    }
    @media only screen and (min-width : 640px) {
      /*your CSS Rules*/     
    }
    @media only screen and (min-width : 768px) {
      /*your CSS Rules*/     
    }       
    @media only screen and (min-width : 960px) {
      /*your CSS Rules*/ 
    }

根据我的理解，以下是您正在寻找的内容的片段:

#content .post-content .row .col-md-6 .box-top {
  background: #714f46;
  padding: 10px;
  color: #fff;
  text-align: center;
  font-family: "custom-script,arial";
  position: relative;
  height: 52px;
  font-size: 34px;
  padding-top: 12px;
}
/*==========  Non-Mobile First Method  ==========*/

@media only screen and (max-width: 960px) {
  /*your CSS Rules*/
}
@media only screen and (max-width: 768px) {
  /*your CSS Rules*/
}
@media only screen and (max-width: 640px) {
  #content .post-content .row .col-md-6 .box-top {
    width: 453px;
  }
  /*your CSS Rules*/
}
@media only screen and (max-width: 480px) {
  /*your CSS Rules*/
}
@media only screen and (max-width: 320px) {
  /*your CSS Rules*/
}

<div id="content">
  <div class="post-content">
    <div class="row">
      <div class="col-md-6">
        <div class="box-top">Something
        </div>
      </div>
    </div>
  </div>
</div>