azukiazusa

CSS メディアクエリで比較演算子が使える

2024.03.02

CSS のメディアクエリで比較演算子（<, >, <=, >=）が使えます。この記法を Range Syntax と呼びます。この記法は従来の min-width や max-width といった記法と比べて、より直感的に記述できるため便利です。

azukiazusa

例えば従来までの記法では以下のように書いていたのを：

@media (min-width: 768px) {
  /* ... */
}

azukiazusa

比較演算子を使うと以下のように書けます：

@media (width >= 768px) {
  /* ... */
}

azukiazusa

対応ブラウザは以下の通りです。