css 媒体查询在 1200px 大屏幕上不起作用

Question

我的媒体查询有问题，代码可以正常工作，直到它触及 1200 像素（大屏幕）第四个和第五个框已附加。 当我尝试每行放置 6 个盒子时，也会发生同样的事情。 我尝试了几种解决方案，但都没有奏效 我该如何解决？ 谢谢

@media only screen and (max-width: 600px){
  #pic {
    float: left;
    box-sizing: border-box;
    margin: 10px 10px 0 0;
    width: calc(1/3*100% - (1 - 1/3)*10px);
    background: #46B980;
    padding: 0px;
    color: #fff;
    height: 100px;
  }
  #pic:nth-child(3) {
    margin-right: 0;
  }
  #pic:nth-child(-n+3) {
    margin-top: 0;
  }
}
@media only screen and (min-width: 600px)
{
  #pic {
    float: left;
    box-sizing: border-box;
    margin: 10px 10px 0 0;
    width: calc(1/4*100% - (1 - 1/4)*10px);
    background: #46B980;
    padding: 0px;
    color: #fff;
    height: 100px;
  }
  #pic:nth-child(4) {
    margin-right: 0;
  }
  #pic:nth-child(-n+4) {
    margin-top: 0;
  }
}
@media only screen and (min-width: 1200px)
{
  #pic {
    float: left;
    box-sizing: border-box;
    margin: 10px 10px 0 0;
    width: calc(1/5*100% - (1 - 1/5)*10px);
    background: #46B980;
    padding: 0px;
    color: #fff;
    height: 100px;
  }

  #pic:nth-child(5) {
    margin-right: 0;

  }
  #pic:nth-child(-n+5) {
    margin-top: 0;
  }
}

      <div id="pic">f</div>
    <div id="pic"></div>
<div id="pic"></div>
<div id="pic"></div>
<div id="pic"></div>

Answer 1

看来您必须稍微更改一下代码。唯一应该受到影响的行是 2nd 媒体查询。目前是：

@media only screen and (min-width: 600px) { ... }

这应该改为：

@media only screen and (max-width: 1200px) { ... }

这似乎对我有用。

注意：你必须全屏打开代码 sn-p 才能看到效果

@media only screen and (max-width: 600px){
  #pic {
    float: left;
    box-sizing: border-box;
    margin: 10px 10px 0 0;
    width: calc(1/3*100% - (1 - 1/3)*10px);
    background: #46B980;
    padding: 0px;
    color: #fff;
    height: 100px;
  }
  #pic:nth-child(3) {
    margin-right: 0;
  }
  #pic:nth-child(-n+3) {
    margin-top: 0;
  }
}
@media only screen and (max-width: 1200px) /* this was the change */
{
  #pic {
    float: left;
    box-sizing: border-box;
    margin: 10px 10px 0 0;
    width: calc(1/4*100% - (1 - 1/4)*10px);
    background: #46B980;
    padding: 0px;
    color: #fff;
    height: 100px;
  }
  #pic:nth-child(4) {
    margin-right: 0;
  }
  #pic:nth-child(-n+4) {
    margin-top: 0;
  }
}
@media only screen and (min-width: 1200px)
{
  #pic {
    float: left;
    box-sizing: border-box;
    margin: 10px 10px 0 0;
    width: calc(1/5*100% - (1 - 1/5)*10px);
    background: #46B980;
    padding: 0px;
    color: #fff;
    height: 100px;
  }

  #pic:nth-child(5) {
    margin-right: 0;

  }
  #pic:nth-child(-n+5) {
    margin-top: 0;
  }
}

      <div id="pic">f</div>
    <div id="pic"></div>
<div id="pic"></div>
<div id="pic"></div>
<div id="pic"></div>