0

我是使用媒体查询的新手，我有一些工作，但其他人没有（我无法解释为什么！）首先，有问题的网站位于http://thermal-lab.com . 我正在尝试将顶部灰色横幅中的徽标调整为低于 700px 宽度（有效），然后再次调整为 515px 宽度（有效）。

但是，我还想将灰色页脚栏（称为第二页脚）的高度加倍为 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;
    }
}
4

2 回答 2

0

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

您可以通过以下两种方法来纠正它：

  1. 稍后在文档中移动您的媒体查询样式表。
  2. 增加媒体查询规则中选择器的特异性。

这可以像将媒体查询规则的选择器更改为以下任何一项一样简单：

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

授人以鱼 vs 授人以鱼

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

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

Chrome 开发工具

注意到height媒体查询规则中的定义已经被击中了吗？这告诉您该元素确实与规则匹配，但还定义了具有更高特异性的规则height。请注意默认规则列表height。没有删除线告诉我们这是应用的规则。

两条规则具有相同的选择器。规则特异性的决胜局是文档顺序。文档中稍后出现的规则具有更高的特异性。

于 2013-07-30T22:00:55.480 回答
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;
      }
于 2013-07-30T21:44:44.437 回答