More than 1 year has passed since last update.

新しいメディアクエリの指定方法

Posted at 2022-12-22

今までのメディアクエリの記述の仕方は min-widthとmax-widthで定義していましたが、比較演算子=、>、<が使用できるようになりました。

@media (min-width: 400px) {
/* スタイル */
}

このような書き方から

@media (width >= 400px) {
/* スタイル */
}

このようになりました。
他にも、タブレットサイズのみ指定したい場合、

@media (min-width: 768px) and (max-width: 1023px) {
  /* スタイル */
}

このような書き方から

@media (768px <= width <= 1023px )  {
  /* スタイル */
}

このような書き方に変わります。スッキリ書けて、可読性も上がるし、いいことだらけですね。
さらに、不等号だけの書き方にも対応したみたい。
下のコードは上のコードの条件と同じです。この書き方は、ちょっと分かりにくい？

@media (767px < width < 1024px )  {
  /* スタイル */
}

プログラムチックな書き方になり、CSSがさらに書きやすくなります。
でも僕は、SASSで書いているのであんまり関係ないかな。