浮动：None 无法使用媒体查询

Question

我在响应式网站上工作，遇到媒体查询问题。

我有 2 个 div，并排设置为 50% width，分别分配了 float: left 和 float: right。在调整大小时，我希望删除这些 floats 并以 100%.

显示 divs 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 中很重要。

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

例如：

#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 中的特异性。 IE。 .block 而不是 #block.

Answer 2

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

首先：您应该避免使用 !important 来解决此类问题，因为这通常只是在样式指向的位置上更具体的问题。

然而，在这种情况下， 首先说明您的媒体查询，然后再说明 "other" 部分。 CSS（像大多数语言一样）是从上到下阅读的。如果您只是 将您的媒体查询移动到 CSS 的底部，您的问题应该得到解决。

浮动：None 无法使用媒体查询

Float: None not working with Media Query

html

css

media-queries