Media query range syntax
従来の min-width / max-width 記法に代わり、width >= 768px のような直感的な比較演算子で範囲を指定できる。複数条件の組み合わせも 768px <= width <= 1024px のように書ける。コードの可読性が大幅に向上する。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
css.at-rules.media.range_syntax | 104 | 104 | 102 | 16.4 | 104 | 16.4 |
注釈 3件
制限事項
- このブラウザでは部分的にしか実装されていません
削除済み
- このバージョンで機能が削除されました (102)
実装メモ
- 機能名が値 `(width > 500px)` の前に来る範囲表記のみをサポートします
基本構文
HTML
/* Traditional syntax */
@media (min-width: 768px) { /* ... */ }
/* Range syntax */
@media (width >= 768px) {
.container { max-width: 1200px; }
}
/* Range specification */
@media (768px <= width <= 1024px) {
.sidebar { display: none; }
}
/* Can also be used with height */
@media (height >= 600px) {
.hero { min-height: 100vh; }
}ライブデモ
実務での使いどころ
-
レスポンシブデザイン
ブレイクポイントの指定をより読みやすく記述でき、メンテナンス性が向上する。
-
範囲指定のレイアウト
タブレットサイズのみに適用するスタイルなど、範囲指定が直感的に書ける。
注意点
- 古いブラウザ（Safari 16.4未満など）では動作しない。既存プロジェクトでは段階的に移行する。
アクセシビリティ
- メディアクエリの範囲記法自体にアクセシビリティへの直接的な影響はないが、可読性向上により適切なレスポンシブ対応が促進される。