没有媒体查询：实现流畅的 3 列桌面到 1 列移动布局

传统媒体查询在适应中发挥着至关重要的作用网站布局适合各种屏幕尺寸。然而，为了创建真正流畅和响应式的设计，人们希望探索消除媒体查询需求的替代解决方案。

考虑一个在桌面上具有 3 列布局的网站：

   |  |  |
---| ---| ---|
| 1 | 2 | 3 |

但是，在移动设备上，布局应转换为单列：

|
---|
| 1 |
| 2 |
| 3 |

为了动态实现这一点，CSS 的强大功能可以派上用场：

Grid 和 Clamp

.grid-wrapper {
   display: grid;
   gap: 15px;
   grid-template-columns: repeat(clamp(1, calc(100% - 500px), 3), 33%);
}

repeat() 函数创建指定数量的列，clamp() 确保当视口缩小到 500px 以下时至少 1 列。

Flexbox 和 Negative Margin

.flex-container {
   display: flex;
   flex-direction: row;
}

.flex-item {
   width: 33%; /* initial width */
   margin-right: -15px; /* negative margin to facilitate overlapping */
   background-color: red;
}

/* Breakpoint rule for smaller screens */
@media screen and (max-width: 500px) {
   .flex-item {
      margin-right: 0; /* remove negative margin on mobile */
   }
}

此方法可确保项目在较大屏幕上并排对齐，但在较窄屏幕上垂直堆叠。负边距最初会产生重叠，可以通过在较小的屏幕上删除它来纠正。

结论

通过利用网格、夹具、弹性盒和负边距，这是可能的创建在多列和单列之间无缝适应的流畅布局，消除了对基本布局更改进行媒体查询的需要。