最大幅と最小幅: デザイン フローを理解する

メディア クエリの領域では、最小幅の選択と最大幅は、Web サイトのデザイン フローとレイアウトに大きな影響を与える可能性があります。 min-width は一般的に使用されますが、max-width もウェブサイト開発では貴重な目的を果たします。

デザイン フローを理解する

min-width と max-width の決定-width は最終的には、採用されている設計アプローチによって決まります。 min-width は主にモバイル ファーストのデザインに関連付けられており、デフォルト スタイルはモバイル デバイスに焦点を当て、後続のクエリはより大きな画面サイズを対象とします。

逆に、max-width はデスクトップ ファーストのアプローチに従い、より大きな画面サイズを想定しています。デバイスが主要なデザイン ターゲットであり、小さな画面に対応するためにクエリが追加されます。

小さい画面用のカスタム ナビゲーション

幅が 2 のデバイス用のカスタム ナビゲーションをデザインする場合360px以下、min-widthとmax-widthの両方を使用できます。モバイルファースト設計アプローチの唯一の例外である場合は、その画面サイズに合わせて最大幅クエリを使用できます。

body {
  /* Default styles for mobile-first layout */
}

@media screen and (max-width: 360px) {
  /* Styles for devices with a width of 360px or less */
}

あるいは、このカスタム ナビゲーションがすべての画面サイズのベースラインであることを目的としている場合は、本文のデフォルト スタイルをより広い画面向けに変更できます。

body {
  /* Styles for screens with a width of 360px or less */
}

@media screen and (min-width: 361px) {
  /* Styles for screens with a width greater than 360px */
}

最小幅と最大幅の選択は、全体的なデザイン フローと Web サイトの特定の要件に基づいて行う必要があります。各アプローチの目的と機能を理解することで、デザイナーはさまざまなデバイスにわたるユーザー エクスペリエンスを最適化できるようになります。