CSS のメディアクエリで比較演算子(<
, >
, <=
, >=
)が使えます。この記法を Range Syntax と呼びます。この記法は従来の min-width
や max-width
といった記法と比べて、より直感的に記述できるため便利です。
例えば従来までの記法では以下のように書いていたのを:
@media (min-width: 768px) {
/* ... */
}
比較演算子を使うと以下のように書けます:
@media (width >= 768px) {
/* ... */
}
対応ブラウザは以下の通りです。
- Chrome 104+
- Edge 104+
- Firefox 63+
- Safari 16.4+