Question

我是新手使用媒体查询，我有一些工作，但其他人没有（我无法解释原因！）首先，有问题的网站位于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;
    }
}

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;
      }

Answer 2

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

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

稍后在文档中移动媒体查询样式表。
提高媒体查询规则中选择器的特异性。

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

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

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

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

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

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

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

媒体查询不响应下面（最大宽度：568px）

2 个答案:

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