Question

我正在使用自适应网站，我遇到了媒体查询问题。

我有2 div个，并排设置为50％width，分别为float: left和float: right分配。在调整大小时，我希望删除这些float并以{100}显示div s width。

然而，这不起作用。

这是我的代码;

@media only screen and (max-width: 700px) {
  #block-half-left, #block-half-right {
    float: none;
    width: 100%;
  }
}
#block-full {
  width: 100%;
  height: 200px;
  background-color: #fff;
  margin-right: auto;
  margin-left: auto;
}
#block-half-left {
  width: 50%;
  height: 200px;
  background-color: gray;
  float: left;
}
#block-half-right {
  width: 50%;
  height: 200px;
  background-color: green;
  float: right;
}

Answer 1

特殊性在CSS中很重要。

增加非浮动块特异性的最简单方法是将规则移到底部。

E.g：

#block-half-left {
  width: 50%;
  height: 200px;
  background-color: gray;
  float: left;
}

#block-half-right {
  width: 50%;
  height: 200px;
  background-color: green;
  float: right;
}

@media only screen and (max-width: 700px) {
  #block-half-left, #block-half-right {
    float: none;
    width: 100%;
  }
}

更多关于特异性：https://developer.mozilla.org/en/docs/Web/CSS/Specificity

此外，如果您使用类而不是ID，您将更容易处理CSS中的特异性。即.block而不是#block。

Answer 2

问题不在于代码本身，而在于它的出现顺序。

首先：你应该避免使用!important来修复这样的问题，因为这通常只是针对造型点的具体问题。

在这种情况下，然而首先说明您的媒体查询，之后您说明了“其他”部分。 CSS（与大多数语言一样）从上到下阅读。如果您只是将媒体查询移至CSS的底部，则应解决您的问题。

Float：没有使用Media Query

2 个答案: