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