沒有媒體查詢：實現流暢的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 */
   }
}

此方法可確保項目在較大螢幕上並排對齊，但在較窄螢幕上垂直堆疊。負邊距最初會產生重疊，可以透過在較小的螢幕上刪除它來修正。

結論

透過利用網格、夾具、彈性盒和負邊距，這是可能的創建在多列和單列之間無縫適應的流暢佈局，消除了對基本佈局變更進行媒體查詢的需要。