メディア クエリなしで流動的なカラム レイアウトを実現できますか?

メディア クエリを使用せずに流動的な列レイアウトを実現する

最新の CSS 技術は、さまざまな画面サイズに流動的に適応する応答性の高いレイアウトを作成するための多彩なオプションを提供します。これにより、複数のメディア クエリの必要性がなくなり、デバイス間でシームレスに流れるレイアウトの作成が可能になります。

この記事では、特定のレイアウト シナリオ (デスクトップ ビューでの 3 列レイアウト、トランジション) を実現する方法を検討します。メディア クエリに依存せずに、モバイル ビューで単一列レイアウトに変換します。

課題

主な課題は、3 列レイアウトから 1 列レイアウトにスムーズに移行することにあります。ビューポートが狭くなると、列は 1 つの列に折りたたまれ、面倒な中間段階が回避されます。

解決策

この解決策には、フレックスボックスとクランプ()関数。 flex-wrap:wrap; でラップするフレックス アイテムを設定し、flex-basis プロパティでクランプ() を使用して、ビューポートの幅に基づいて各フレックス アイテムの幅を決定します。

コード

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

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

その仕組み動作します

• clamp() 関数は、最小値、推奨値、最大値の 3 つの引数を受け取ります。
• このシナリオでは、最小値を設定します。 0px、推奨値は 100%、最大値は (400px - 100vw) * 1000.
• ビューポートの幅が 400px より大きい場合、clamp() 関数は推奨値 100% を返し、結果として 3 つの等しい幅の列が作成されます。
• ビューポートの幅が以下に減少するにつれて、 400px、clamp() 関数は 400px と現在のビューポートの差に比例した値を返します。 width.
• これにより、フレックス項目が複数の行に折り返され、単一列のレイアウトが作成されます。

結論

Clamp() 関数とフレックスボックスを使用すると、メディア クエリを必要とせずに、さまざまな画面サイズにシームレスに適応する応答性の高いレイアウトを作成できます。このアプローチにより、訪問者にとってよりスムーズでユーザーフレンドリーなエクスペリエンスが提供され、Web サイトがすべてのデバイスで見栄えよく表示されるようになります。

以上がメディア クエリなしで流動的なカラム レイアウトを実現できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。