媒体查询不响应下面(最大宽度:568px)

时间:2013-07-30 21:29:34

标签: css media-queries

我是新手使用媒体查询,我有一些工作,但其他人没有(我无法解释原因!)首先,有问题的网站位于http://thermal-lab.com。我试图将顶部灰色横幅中的徽标重新调整为700px宽度(这是正常工作),然后再以515px宽度再调整大小(这是有效的)。

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

这是相关的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;
    }
}

2 个答案:

答案 0 :(得分:0)

所以你提供了代码。我可以建议的第一件事是确保所有.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;
      }

答案 1 :(得分:0)

这完全取决于选择器的强度和特异性。在媒体查询中定义的规则不会赋予其更大的特异性。由于您的媒体查询样式表出现在文档的前面,因此它的特异性较低。

以下两种方法可以纠正错误:

  1. 稍后在文档中移动媒体查询样式表。
  2. 提高媒体查询规则中选择器的特异性。
  3. 这可以像将媒体查询规则的选择器更改为以下任何一项一样简单:

    html .second-footer
    div.second-footer
    * .second-footer
    

    给一个人一条鱼,教一个人钓鱼

    这个问题很容易解决。我是这样做的:

    1. 在宽度小于700像素的浏览器中打开thermal-lab.com
    2. 点击 F12 打开开发者工具。除了没有FireBug的FireFox之外,这适用于任何浏览器。 F12 打开FireBug,但您必须单独安装。要打开FireFox的内置开发人员工具,请使用菜单。
    3. 找到未按预期应用样式的源中的元素。
    4. 查看该元素的样式检查器。
    5. Chrome dev tools

      请注意,媒体查询规则中的height定义已被击中?这告诉您元素确实与规则匹配,但具有更高特异性的规则也定义了height。请注意默认规则列表height。缺少删除线告诉我们这是适用的规则。

      两个规则都有相同的选择器。规则特异性的平局是文档顺序。文档后面出现的规则具有更高的特异性。