不同的行为流体布局

Question

我正在寻找前段时间看到的布局，但我忘记添加书签了。它有 3 个主要列，但在调整大小时，它变为 2 个，第 3 个下降到下一行。这不是正常的布局调整溢出大小。

在调整大小时，3 个列实际上保持相同的宽度，直到达到某个限制，每个列的宽度为 33%，但增加了高度。唯一明显改变的是文本大小。然后，在调整大小的某个时刻，3 个中的一个下降到下一行，使顶部的 2 个调整大小以填充整个宽度（50% 和 50%），而底部的一个则填充100% 的新行。我尝试了很多谷歌搜索，但由于我不是本地人，我似乎无法找到 精确 术语来找到它。我知道它在演示中完美运行，并且仅使用 CSS 和 HTML。

编辑，他们三个的容器一直保持相同的宽度。

Answer 1

媒体查询听起来像是您所追求的。您可以根据浏览器窗口的宽度指定不同的样式。它当然可以用来实现你所追求的。

例如。假设您想定位宽度大于 900 像素的设备，您可以使用：

@media screen and (min-width: 900px) {
  .class {
    background: #666;
  }
}

您可以找到有关媒体查询的更多信息here