💡

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

2021/11/23に公開

メディアクエリを利用した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%;
  }
}

Discussion