css - 媒体查询未响应以下(最大宽度 : 568px)

Question

我是使用媒体查询的新手，我有一些工作但其他人没有(我无法解释为什么!)首先，有问题的站点位于 http://thermal-lab.com .我正在尝试将顶部灰色横幅中的 Logo 调整到 700 像素宽度以下(有效)，然后再次调整到 515 像素宽度(有效)。

但是，我还想将灰色页脚栏(称为第二页脚)的高度加倍为 700 像素，但这是行不通的。非常感谢任何帮助!

这是相关的 CSS:

.second-footer {
    width:100%;
    height:35px;
    position:fixed;
    bottom:90px;
    left:0;
    background:#f6f6f6;
    border-top:1px solid #c6c6c6;
    border-bottom:1px solid #c6c6c6;
}
.second-footer-wrapper span {
    display: inline-block;
}
.second-footer-wrapper {
    max-width: 980px;
    height: 35px;
    margin:0 auto;
    padding:0 12px;
}
.second-footer-font {
}
.second-footer-wrapper .left {  
    position: relative;
    float: left;
}
.second-footer-wrapper .right {
    position: relative;
    float: right;
}

这是我的 700px 媒体查询中的代码:

@media screen and (max-width: 700px) {
    .wrapper .ut {
        width:185px;
        padding-top:4px;
    }
    .wrapper .csd {
        width:65px;
        padding-top:3px;
    }
    .wrapper .utsoa {
        width:186px;
        padding-top:2px;
    }
    .second-footer {
        height:70px;
    }
    .second-footer-wrapper {
        height: 70px;
    }
}

Answer 1

所以你提供的代码。我建议的第一件事是确保所有 .second-footer CSS 都在媒体查询括号内。像这样:

@media screen and (max-width: 700px) {
  /*  SECOND FOOTER    */
  .second-footer {
    width:100%;
    height:35px;
    position:fixed;
    bottom:90px;
    left:0;
    background:#f6f6f6;
    border-top:1px solid #c6c6c6;
    border-bottom:1px solid #c6c6c6;
  }

  .second-footer-wrapper span {
    display: inline-block;
  }

  .second-footer-wrapper {
    max-width: 980px;
    height: 35px;
    margin:0 auto;
    padding:0 12px;
  }

  .second-footer-font {

  }

  .second-footer-wrapper .left {  
    position: relative;
    float: left;

  }

  .second-footer-wrapper .right {
    position: relative;
    float: right;
  }

  /*  OTHER STUFF   */
  .wrapper .ut {
    width:185px;
    padding-top:4px;
  }

  .wrapper .csd {
    width:65px;
    padding-top:3px;
  }

  .wrapper .utsoa {
    width:186px;
    padding-top:2px;
  }

  .second-footer {
    height:70px;
  }

  .second-footer-wrapper {
    height: 70px;
  }
}

请试试看。此外，我没有考虑任何会覆盖自身的 CSS。在此示例中，高度永远不会达到 35px。

.second-footer {
        width:100%;
        height:35px;
        position:fixed;
        bottom:90px;
        left:0;
        background:#f6f6f6;
        border-top:1px solid #c6c6c6;
        border-bottom:1px solid #c6c6c6;
      }
.second-footer {
        height:70px;
      }