モバイルファーストデザインは実際にどのように機能しますか？

モバイルファーストデザインとは、最初にモバイル向けのWebサイトを構築し、次にCSSメディアクエリを使用して、タブレットからデスクトップまで、より大きな画面サイズでWebサイトをどのように表示するかを制御することを指します。つまり、メディアクエリを使用して、ウェブサイトをレスポンシブにします（さまざまな画面サイズに適応します）。

メディアクエリを使用する場合、それらをブレークポイントと呼びます。 したがって、Webサイトのレイアウトをモバイルレイアウトから画面幅800ピクセルのタブレットレイアウトに切り替える必要があると判断した場合は、次のようなメディアクエリを作成します。

@media screen and (min-width: 800px) {
  /* Add Tablet styles here */
}

そして今、800pxが最初のブレークポイントです。

次のように、デスクトップブレークポイントを1200pxにすることを決定したとします。

@media screen and (min-width: 1200px) {
  /* Add Desktop styles here */
}

これが2番目のブレークポイントです。これで、合計2つのブレークポイントができました。

上記のブレークポイントモデルを使用したレイアウトの簡単なデモは次のとおりです。

https://codepen.io/StrengthandFreedom/pen/abzywPd

ご覧のとおり、モバイル：0〜800ピクセル、タブレット：800〜1200ピクセル、デスクトップ：1200以上の、3つの異なる画面サイズ範囲があり、CSSメディアで合計2つのブレークポイントを作成する必要がありました。クエリ。

上記の例は単純なものですが、要点を理解する必要があります。フォントサイズからレイアウト幅まで、ブレークポイント間のすべてを調整できます。

3つ以上のブレークポイントが必要な場合はどうなりますか？

状況によっては、いくつかのブレークポイントを使用して上記に進む、よりきめ細かいアプローチが必要になります。 100から200px程度ごとにブレークポイントを使用して10個ものWebサイトを使用しているWebサイトを見たことがあります。

ほとんどのユースケースでは、それはおそらくやり過ぎです。

ウェブサイトのブレークポイントの理想的な数はいくつですか？

なにもない。あなたは文脈にあなたの決定を導くようにすべきです。 Webサイトが複雑になるほど、ターゲットオーディエンスが使用するすべての重要なデバイス/画面サイズでWebサイトを表示できるようにするために、通常、より多くのブレークポイントが必要になります。

経験則として、私の経験では、平均的なWebサイトは、ほとんどのベースをカバーするために2〜4個のブレークポイントを必要とします。私は4で行く傾向があります。

すでに2つのブレークポイントを使用する例を見てきましたが、次に4つを使用する別の例を見てみましょう。

4つのブレークポイントを持つレスポンシブレイアウト

上から同じ記事のレイアウトを使用して、さらにいくつかの制御を可能にするために、いくつかのブレークポイントを追加しましょう。モバイルでの0から800pxへのジャンプは少し大きすぎると思います。特にハンドヘルドデバイスのランドスケープモードでは、これが常にうまく機能するとは限りません。

その理由は、私たちが使用するフォントサイズは大きなハンドヘルドデバイスではうまく機能しますが、h1（見出し）は少し圧倒的であるためです。同時に、500pxの幅のポイントを超えると、コンテンツの幅が少し広すぎます。これにより、メジャー（行の長さ）が長すぎて、1行あたりの文字数が多すぎて読みやすくなりません。理想的には、最適な読み取りのために、行の長さを1行あたり約40〜80文字にする必要があります。

この問題を解決するために、最初のブレークポイントを480ピクセルに追加してから、デスクトップとアップブレークポイントとして1200ピクセルを使用する代わりに、1900ピクセルに別のブレークポイントを追加しましょう（非常に大きな画面の場合）。

ここで4つのブレークポイントのデモを確認してください：

https://codepen.io/StrengthandFreedom/pen/mdyMMeL

ブラウザウィンドウのサイズを変更すると、2ブレークポイントの例と比較して、タイポグラフィが4ブレークポイントのレイアウトでより適切に拡大および縮小（適応）することがわかります。これは、モバイルとタブレットの間にブレークポイントが追加されたことで、コンテンツの幅、間隔（パディング/マージン）、フォントサイズをより正確に制御できるようになったためです。

1900pxのブレークポイントは、外部モニターなどの非常に大きな画面用に設計する場合に役立ちます。これは、最近ますます多くの人々が使用しているため、見落としてはなりません。

Webサイトでブレークポイントを1つだけ使用することで回避できますか？

私は物事をシンプルに保つのが好きです。システム内の可動部品が少ないほど、保守が容易になります。ただし、レイアウトを簡単にすることには限界があります。

一部の設計者および開発者は、Webサイト全体に1つのブレークポイントのみを使用します。 1つのブレークポイントは、それらが使用することを意味します：

1. モバイルレイアウト
2. デスクトップレイアウト

1つのブレークポイントは、通常、600〜960ピクセルの画面幅の範囲で定義されます。

さて、それは 無数の異なる画面サイズとデバイスタイプに合わせて設計する必要がある現代では、少し楽観的です。

幅広いユーザー（さまざまなデバイス/画面サイズ）に優れたユーザーエクスペリエンスを提供することに関心がある場合は、通常、複数のブレークポイントが必要です。

前に言ったことを繰り返すには、コンテキストに基づいて設計を決定します。