メディアクエリのRange Syntaxを使う

Safari 16.4がサポートしたことで、Range Syntaxが全主要ブラウザで利用可能になった。

Before

/* 画面サイズ 600px 未満 */
@media (max-width: 599px) { ... }

/* 画面サイズ 600px 以上 1200px 未満 */
@media (min-width: 601px) and (max-width: 1200px) { ... }

/* 画面サイズ 1200px 以上 */
@media (min-width: 1201px) { ... }

After

/* 画面サイズ 600px 未満 */
@media (width < 600px) { ... }

/* 画面サイズ 600px 以上 1200px 未満 */
@media (600px <= width < 1200px) { ... }

/* 画面サイズ 1200px 以上 */
@media (1200px <= width) { ... }

After: @containerでも利用可能

@container (300px <= width) { ... }