はじめに
CSSでレスポンシブデザインを実装する際にメディアクエリを使用することが一般的ですが、範囲指定で比較演算子が使えるようになり直感的でわかりやすくなりました。
今まではメディアクエリで比較演算子（>=, <=）を使用することはできませんでしたが、対応ブラウザが増えたことにより実用的になりましたので紹介します。
今までの記法
「デバイスの幅が375px以上600px以下の場合にだけ適用するスタイル」を定義するには、複数のメディアクエリを使用する必要がありました。
@media (min-width: 375px) and (max-width: 600px) {...}
比較演算子を使った記法
Media Queries Level 4 で"range"型を持つ特性を使って以下のようにメディアクエリーを記述することができます。
@media (375px <= width <= 600px ) {...}
おまけ
論理代数（and, not, or）を使ったメディアクエリーも使える
not による特性の否定
not() を使用してメディア指定を囲むとその指定を否定します。
例えば、 not(hover) は端末でホバーができない場合に一致します。
@media (not(hover)) { ... }