レスポンシブデザインに適したCSSブレークポイント値は何ですか？

プロジェクトで使用する最適なCSSブレークポイント値

サイトを設計しているときに、CSSブレークポイントにかなりランダムな値を使用していることに気付きました。 800や1200のような丸められた値の場合もあれば、672のようなピクセルまでの特定の値の場合もあります。

今後、ブレークポイントに適用する適切な値を検索しました。

私はこれを調べるのに少し時間がありました、そして私はこの結論に達しました。

心配すべき5つの主要なデバイスサイズがあります。

これらのデバイスは、これらのピクセル値にマップされます。

私はそれらの値を追い風のデフォルト。

私はデザイナーではないので、毎日ベストプラクティスに携わっていませんが、今回はモバイルを最初にデザインすることにしました。

つまり、私のCSSは、メディアクエリなしで、モバイルポートレートのユースケース向けに設計し、次にブレークポイントを追加して、ますます大きくなるデバイス向けに設計し、max-widthメディアクエリから。

私はいつも反対のルートを選んだと思います。私が最もよく使うのは大きな画面のデザインで、次に小さくなりますが、モバイルファーストでデザインし、min-width今日最も受け入れられ、使用されているソリューションのようです。

これから使用するメディアクエリは次のとおりです。

@media (min-width: 640px) {
}
@media (min-width: 768px) {
}
@media (min-width: 1024px) {
}
@media (min-width: 1280px) {
}

私の無料ダウンロードCSSハンドブック