Question

所以我有一个noob问题，这个问题让我很烦。所以我有以下类型的样式表：

#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规则一样具有优先权，因为在crhome检查器中宽度为1366px时，它仍然使用640px规则而不是宽度我刚刚定义了。现在我正在考虑，而不是做：(min-width: xyzpx)我会使用max-width，但这似乎采取了一种平滑缩小影响客户想要的方式，他们不希望它在媒体大小之间跳跃

我的元素是否有max-width 453px来覆盖@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>

Answer 2

尝试撤消媒体查询的顺序。最小min-width首先。

假设您的窗口宽度为700px。然后(min-width: 960px)和(min-width: 768px)不匹配并被跳过，但是 (min-width: 640px)和(min-width: 480px)匹配这些块中的匹配样式是按照它们出现的顺序应用的在CSS文件中。后来的样式覆盖了以前的样式，例如：

p { color: green; }
p { color: red; }

您的p颜色为红色。

这个实例可能更清晰：http://jsbin.com/yuqigedudi/1/edit?html,output

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    /* Default color when no media queries bellow match.
    In this our case when window width < 200px */
    p { color: black }

    /* If window size >= 200px */
    @media (min-width: 200px) {
      p { color: red }
    }

    /* If window size >= 300px */
    @media (min-width: 300px) {
      p { color: orange }
    }

    /* If window size >= 400px */
    @media (min-width: 400px) {
      p { color: blue }
    }
  </style>
</head>
<body>
  <p>
    Resize this frame and see my color change!
  </p>
</body>
</html>

在css中使用@media时，样式优于骑行风格

2 个答案: