media query の新記法

最近のcssは進化が著しい印象がある。(cssのネスト対応など...)

その中の一つとして media queryの新記法がある。

min-width ,max-width ,and で繋げる必要があるなど、どう書けば良いか迷うことが多々ある。現代ではこの書き方に新記法が加わりより直感的に書くことができるようになった。

以下がその例。

// 従来
@media (max-width: 599.99px) {
  
}

// 新記法
@media (width < 600px) {
  
}

// 間もかける
@media (600px<= width < 1000px) {
  
}

このブログの一覧ページもレスポンシブに対応しており、この記法を採用している。とてもわかりやすくて良い。

  .grid-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }

  @media (width < 768px) {
    .grid-container {
      grid-template-columns: 1fr;
    }
  }