CSSメディアクエリのビューポート範囲とデバイスターゲティング

実デバイスにマッピングされたメディアクエリ範囲

各メディアクエリ範囲にどの実デバイスが該当するかを理解することで、より意図的なCSSを記述できます。どのブレークポイントを使用するか推測する代わりに、範囲を実際のデバイスビューポートにマッピングできます。

デバイスと範囲のマッピング

0-479px     │ 小型スマートフォン (iPhone SE, Galaxy Sポートレート)
480-767px   │ 大型スマートフォン、小型タブレット (Pixel, iPhone Pro Maxランドスケープ)
768-1023px  │ タブレットポートレート (iPad, Galaxy Tab)
1024-1279px │ タブレットランドスケープ、小型ノートPC (iPad Pro, Chromebook)
1280-1535px │ 標準ノートPC (MacBook Air, Surface Laptop)
1536px+     │ 大型ノートPC、デスクトップ (MacBook Pro 16", 外部モニター)

モダンな範囲構文

CSSはメディアクエリの範囲構文をサポートしており、より読みやすくなっています：

/* 旧構文 */
@media (min-width: 768px) and (max-width: 1023px) { ... }

/* 新しい範囲構文 */
@media (768px <= width < 1024px) { ... }

コンテナクエリ

CSSコンテナクエリ（@container）は、ビューポートベースのメディアクエリに代わるモダンな選択肢です。ビューポートではなく親コンテナのサイズに応答するため、レイアウト内のどこに配置されてもコンポーネントが真にレスポンシブになります。

.card-container {
  container-type: inline-size;
}

@container (min-width: 400px) {
  .card { display: grid; grid-template-columns: 1fr 2fr; }
}

よくある落とし穴

• 範囲の重複：max-widthとmin-widthがギャップや重複を作らないようにしてください。よりクリーンなコードのためにmin-widthのみを使用する（モバイルファースト）のがおすすめです。
• ポートレートの前提：412px幅のスマートフォンはランドスケープでは915px幅になり、タブレット範囲に入ります。両方の方向でテストしてください。
• DPRの無視：メディアクエリはCSSピクセルにマッチし、物理ピクセルではありません。min-width: 1024pxクエリはDPRに関係なく1024 CSSピクセルでトリガーされます。