Tailwind・Bootstrap・Foundationのブレークポイントと、対応する@mediaクエリを一覧で確認できます。コピーしてそのまま使えます。
主なフレームワークのブレークポイント
どちらもmin-width基準（モバイルファースト）です。小さい画面のスタイルを基本として書き、大きい画面向けに上書きしていく設計になっています。
| 名称 | Tailwind | Bootstrap 5 |
|---|---|---|
| sm | 640px | 576px |
| md | 768px | 768px |
| lg | 1024px | 992px |
| xl | 1280px | 1200px |
| 2xl | 1536px | 1400px |
モバイルファーストで書く
max-widthで書き始めると、条件が重なったときの上書き関係が複雑になりがちです。min-widthで統一すると、スタイルの流れが追いやすくなります。
/* 基本＝スマホ向け */
.card { padding: 16px; }
/* 768px以上で上書き */
@media (min-width: 768px) {
.card { padding: 32px; }
}端末幅以外の条件
- prefers-color-scheme: dark → ダークモードの判定
- prefers-reduced-motion: reduce → 動きを減らす設定の判定
- hover: hover → ホバーできる入力装置かどうか
- orientation: landscape → 横向きかどうか
よくある質問
Q min-widthとmax-widthはどちらを使うべき？
モバイルファーストのmin-widthが主流です。上書きの流れが一方向になり、管理しやすくなります。
Q ブレークポイントは何個必要ですか？
多くのサイトでは2〜3個で足ります。デザインが崩れる幅で区切るのが基本です。
Q 端末ごとに指定すべきですか？
端末は増え続けるため、幅で区切るのが現実的です。特定機種に合わせた指定は避けてください。
Q コンテナクエリとの違いは？
メディアクエリは画面幅、コンテナクエリは親要素の幅を条件にします。部品単位の可変レイアウトには後者が適しています。