html - 不同的行为流体布局

Question

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

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

编辑，其中 3 个的容器一直保持相同的宽度。

Answer 1

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

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

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

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