【CSS】メディアクエリ(Media Queries)基礎

メディアクエリを利用したRWD（レスポンシブ・ウェブ・デザイン）の実装

モバイルファースト

小さなビューポートサイズをベースとして、大きなビューポート用のスタイルを上書きしていくスタイル。

• 上書きするスタイルが少なくなる傾向にある。
• flexboxやgridなど、包括する要素が必要になるDOM（HTMLタグ）などを予め想定する必要がある。

/*  ベーススタイル  */
div {
  width: 100%;
}

/*  横幅が321px以上のときのスタイル  */
@media (min-width: 321px) {
  div {
    width: 100%;
  }
}

/*  横幅が769px以上のときのスタイル  */
@media (min-width: 769px) {
  div {
    width: 640px;  
  }
}

/*  横幅が769px以上かつ、992px以下のときのスタイル  */
@media (min-width: 769px) and (max-width: 992px) {
  div {
    width: 800px;
  }
}

/*  横幅が993px以上のときのスタイル  */
@media (min-width: 993px) {
  div {
    width: 1200px;
  }
}

PCファースト

大きなビューポートサイズをベースに、小さなビューポート用のスタイルを上書きしていくスタイル。

• 上書きする項目が多くなる傾向にある。
• 複雑なPCレイアウトからシンプルなSPへシフトするため、レスポンス想定が比較的容易。

/*  ベーススタイル  */
div {
  width: 1000px;
}

/*  横幅が992px以下のときのスタイル  */
@media (max-width: 992px) {
  div {
    width: 800px;
  }
}

/*  横幅が768px以下かつ、640px以上のときのスタイル  */
@media (max-width: 768px) and (min-width: 640px) {
  div {
    width: 700px;
  }
}

/*  横幅が320px以下のときのスタイル  */
@media (max-width: 320px) {
  div {
    width: 100%;
  }
}