如何在没有媒体查询的情况下创建具有 3 列桌面和 1 列移动设备的流体网格布局？

在没有媒体查询的情况下实现 3 列桌面和 1 列移动布局

问题：
我们如何创建流体网格布局，从 3 列桌面布局切换到 1 列移动布局，而不依赖于媒体查询？

解决方案：
CSS 允许动态不依赖媒体查询的布局调整。方法如下：

1.利用 Clamp() 和 Flex：
在最初的 CSS 中，您在 grid-template-columns 属性中使用了 Clip() 来根据屏幕尺寸从重复（3）切换到重复（1）。但是，单独使用钳位（）并不能提供所需的结果。相反，我们可以在 Flex 项目的 flex-basis 属性中使用钳位（）来创建包装行为：

.container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  height: 100px;
  border: 2px solid;
  background: red;
  flex-basis: max(0px, (400px - 100vw) * 1000);
  flex-grow: 1;
}

2.根据屏幕尺寸调整公式：
在此代码中，400px 表示布局应从 3 列切换到 1 列的屏幕尺寸。您可以根据所需的断点调整该值。例如，要以 500px 切换，请将 400px 替换为 500px。

3.计算说明：
公式 max(0px, (400px - 100vw) * 1000) 确保当视口宽度大于 400px 时，每个项目的 flex-basis 保持为 0px。这使它们在 3 列布局中并排排列。然而，当视口宽度减小到 400px 以下时，flex-basis 会变成一个很大的值，有效地将项目推到单独的行上，从而形成 1 列布局。

通过以这种方式使用clamp()，您可以实现流畅且响应式的布局，适应不同的屏幕尺寸，而无需媒体查询。

以上是如何在没有媒体查询的情况下创建具有 3 列桌面和 1 列移动设备的流体网格布局？的详细内容。更多信息请关注PHP中文网其他相关文章！