メディア クエリを使用せずに 3 列のデスクトップと 1 列のモバイルで流動的なグリッド レイアウトを作成する方法

メディア クエリを使用せずに 3 列のデスクトップ レイアウトと 1 列のモバイル レイアウトを実現する

問題:
どのように作成できるか依存せずに 3 列のデスクトップ レイアウトから 1 列のモバイル レイアウトに切り替える流動的なグリッド レイアウトメディア クエリについて?

解決策:
CSS を使用すると、メディア クエリに依存せずに動的なレイアウト調整が可能になります。方法は次のとおりです:

1. Clamp() と Flex の利用:
最初の CSS では、画面サイズに基づいてrepeat(3) からrepeat(1) に切り替えるために、grid-template-columns プロパティにclamp() を採用しました。ただし、clamp() だけでは望ましい結果は得られません。代わりに、フレックス項目の flex-basis プロパティ内で Clamp() を使用して、ラッピング動作を作成できます。

.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 を超えている場合でも、各項目のフレックス ベースが 0px のままであることを保証します。これにより、3 列のレイアウトで並べて配置されます。ただし、ビューポートの幅が 400px を下回ると、flex-basis が大きな値になり、実質的に項目が別の行に押し出され、1 列のレイアウトになります。

このようにクランプ() を利用することで、メディア クエリを必要とせずに、さまざまな画面サイズに適応する、流動的で応答性の高いレイアウトを実現できます。

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