レスポンシブレイアウト、メディアクエリが少なくなります

レスポンシブデザインは、現代のWeb開発の基礎です。メディアクエリは長い間不可欠でしたが、CSSの進歩は、信頼を大幅に減らすためのテクニックを提供します。この記事では、メディアクエリを最小限に抑える、またはゼロでさえゼロでレスポンシブレイアウトを作成する方法を示し、よりクリーンで保守可能なコードをもたらします。

明示的なメディアクエリブレークポイントなしで応答性を実現するために、FlexBoxおよびグリッドベースのアプローチを検討します。

フレックスボックスとflex-wrapを活用します

簡単な例ではflex: 400pxを使用して、要素のベース幅を設定します。不十分なスペースが存在する場合、アイテムは新しいラインに包まれます。残りのスペースは、各ラインの要素に分散されています。 flex: 400pxはflex-grow: 1; flex-shrink: 1; flex-basis: 400px; 。

このアプローチは簡潔さ（2行のコード）を提供しますが、一貫したフッター幅、行あたりのアイテム、およびラッピング動作に対する細かい制御がありません。

CSSグリッドを使用してauto-fitとminmaxを使用します

CSSグリッドは、 repeat(auto-fit, minmax(400px, 1fr))を使用して、ラッピング動作を伴う同様のベース幅を提供します。要素は、利用可能なスペースを埋めるために成長し、行全体で一貫した幅を維持します。ただし、アイテムは400px未満で縮小することはできず、オーバーフローを引き起こす可能性があります。

1行あたりのアイテムを制御します

FlexBoxアプローチを改良すると、 flex: 400px flex: max(400px, (100% - 20px)/3); 。これにより、各行が最大3つのアイテムに制限されます。 20px 2つのギャップを占めています（アイテム間の10pxギャップを想定しています）。より一般化された式でmax(400px, 100%/(N 1) 0.1%)は、明示的なギャップ計算の必要性を排除します。ここで、nは行あたりのアイテムの最大数を表します。これにより、行ごとのアイテムを部分的に制御できます。同じ原理がCSSグリッドにも当てはまります。

アイテムが成長して縮小するようにします

グリッドアプローチのオーバーフローの問題に対処するために、 clamp(100%/(N 1) 0.1%, 400px, 100%)を使用します。これにより、アイテムが利用可能なスペースを埋めるように成長しますが、コンテナの幅を超えることはありません。

ラッピングを正確に制御します

アイテムを包むときに制御するために、 clamp()式をclamp(100%/(N 1) 0.1%, (400px - 100vw)*1000, 100%)のように変更します。画面幅（100VW）が400pxを超えると、1行あたりのnアイテムがあります。 400px未満では、1行ごとに1つの全幅のアイテムを取得し、メディアクエリなしでブレークポイントを効果的に作成します。ここでは、400pxがブレークポイントとして機能します。

複数のブレークポイントの処理

複数のアイテムカウント間の遷移を管理するために（例：no -nowあたりの項目）、 clamp()関数clamp(clamp(100%/(N 1) 0.1%, (W1 - 100vw)*1000,100%/(M 1) 0.1%), (W2 - 100vw)*1000, 100%) 。 W1とW2はブレークポイントを表します。これにより、単一のCSS宣言で洗練された応答性のある動作が可能になります。さらにネストはこれをより多くのブレークポイントに拡張します。

コンテナクエリのシミュレーション

100vw 100%に置き換えることにより、コンテナクエリをシミュレートでき、レイアウトをビューポートではなくコンテナの幅に応答します。

高度なテクニック

列制御を超えて、要素の寸法または画面サイズに基づいて条件付きスタイルを作成できます。

条件付き背景色：線形勾配を使用して、要素の幅に基づいて背景色を条件付けて変更できます。

 div {
  背景：線形勾配（緑0 0）0 /最大（0px、100px -100％）1px、赤。
}

要素の可視性の切り替え： clamp()とoverflow: hidden; 。

要素の位置の変更： clamp()を使用して画面サイズに基づいて、要素の位置（ top 、 left ）を動的に調整できます。

結論

メディアのクエリは依然として価値がありますが、これらの手法は、それらに依存して依存して洗練されたレスポンシブデザインを達成する方法を示しています。焦点は、メディアクエリを完全に排除することではなく、コードを最適化し、動的でレスポンシブなレイアウトを作成するためのCSSの機能を活用することです。これらの戦略は、強力な制御とクリーンなコードを提供し、保守性と効率を高めます。

以上がレスポンシブレイアウト、メディアクエリが少なくなりますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。