メディアクエリ範囲指定の新構文

CSSのメディアクエリを比較演算子での指定に更新。

  • 幅768px以上
    • 旧　@media (min-width: 768px)
    • 新　@media (width >= 768px)
  • 幅768px未満
    • 旧　@media (max-width: 767px)
    • 新　@media (width < 768px)
  • 幅768px以上1280px未満
    • 旧　@media (min-width: 768px) and (max-width: 1279px)
    • 新　@media (768px <= width < 1280px)

書きやすいし分かりやすい。width < 768pxは768px > widthでもいい。

対応が遅れていたSafariも2023年3月に対応した。
Media Queries: Range Syntax | Can I use

関連記事