メディア クエリを使用せずに 3 列から 1 列への流動的なレイアウトを作成する方法

メディア クエリなし: 流動的な 3 列のデスクトップから 1 列のモバイル レイアウトを実現

従来のメディア クエリは、モバイル レイアウトの適応において重要な役割を果たします。ウェブサイトのレイアウトをさまざまな画面サイズに対応させます。ただし、真に流動的で応答性の高いデザインを作成するために、メディア クエリの必要性を排除する代替ソリューションを検討したいという要望があります。

デスクトップ上の 3 列レイアウトの Web サイトを考えてみましょう。

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

ただし、モバイルでは、レイアウトは 1 つの列に変換される必要があります:

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

これを動的に実現するには、CSS の強力な機能が役に立ちます:

グリッドとクランプ

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

repeat() 関数は指定された数の列を作成し、ビューポートが 500 ピクセル未満に縮小する場合、clamp() は最小 1 列を確保します。

フレックスボックスと負のマージン

.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 */
   }
}

このアプローチにより、アイテムは大きな画面では横に並べられますが、狭い画面では垂直にスタックされます。最初は負のマージンによってオーバーラップが発生しますが、小さい画面ではそれを削除することで修正されます。

結論

グリッド、クランプ、フレックスボックス、および負のマージンを活用することで、次のことが可能になります。複数の列と単一の列の間でシームレスに適応する流動的なレイアウトを作成し、基本的なレイアウト変更のためのメディア クエリの必要性を排除します。

以上がメディア クエリを使用せずに 3 列から 1 列への流動的なレイアウトを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。