メディア クエリを使用せずに 3 列のデスクトップから 1 列のモバイル レイアウトを実現するにはどうすればよいですか?

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

さまざまな画面サイズに適応する柔軟なレイアウトを作成することは、Web デザインの一般的な課題です。メディア クエリは信頼性の高いソリューションですが、レイアウトに不要なブレークポイントが導入される可能性があります。この記事では、メディア クエリに頼らずに 3 列のデスクトップから 1 列のモバイル レイアウトを実現する別のアプローチを検討します。

問題:

多くの場合、Web サイトは 3 列を望んでいます。デスクトップでは列レイアウト、モバイル デバイスでは単一列レイアウトに移行します。ただし、複数列から単一列レイアウトへの移行中に、列が狭くなり歪む中間段階が発生します。 Clamp()、minmax()、およびその他の関数を利用しようとすると、満足のいく結果が得られないことがよくあります。

解決策:

提案された解決策は、次の式でフレックスベースを利用します。メディア クエリを使用せずにブレークポイントを効果的に作成します。式は次のとおりです:

max(0px, (target-screen-size - 100vw)*1000)

たとえば、画面サイズ 400px でブレークポイントを作成するには:

max(0px, (400px - 100vw)*1000)

画面の幅が 400px より広い場合、式は 0px を返します。列が影響を受けないようにします。それ以外の場合は、大きな値が返され、実質的に改行が強制され、単一列のレイアウトが作成されます。

実装:

フレックスベースに数式を適用します。コンテナの子の要素:

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

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

このアプローチにより、列レイアウト間のスムーズな移行を実現しながら、明示的なメディア クエリの必要性がなくなりました。

以上がメディア クエリを使用せずに 3 列のデスクトップから 1 列のモバイル レイアウトを実現するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。