Question

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

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

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

Answer 1

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

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

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

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

不同的行为流体布局

1 个答案: