メディアクエリを利用したRWD（レスポンシブ・ウェブ・デザイン）の実装
モバイルファースト
小さなビューポートサイズをベースとして、大きなビューポート用のスタイルを上書きしていくスタイル。
上書きするスタイルが少なくなる傾向にある。
flexboxやgridなど、包括する要素が必要になるDOM（HTMLタグ）などを予め想定する必要がある。
/* ベーススタイル */
width: 100%;
/* 横幅が321px以上のときのスタイル */
@media (min-width: 321px) {
width: 100%;
}
/* 横幅が769px以上のときのスタイル */
@media (min-width: 769px) {
width: 640px;
}
/* 横幅が769px以上かつ、992px以下のときのスタイル */
@media (min-width: 769px) and (max-width: 992px) {
width: 800px;
}
/* 横幅が993px以上のときのスタイル */
@media (min-width: 993px) {
width: 1200px;
}
PCファースト
大きなビューポートサイズをベースに、小さなビューポート用のスタイルを上書きしていくスタイル。
上書きする項目が多くなる傾向にある。
複雑なPCレイアウトからシンプルなSPへシフトするため、レスポンス想定が比較的容易。
/* ベーススタイル */
width: 1000px;
/* 横幅が992px以下のときのスタイル */
@media (max-width: 992px) {
width: 800px;
}
/* 横幅が768px以下かつ、640px以上のときのスタイル */
@media (max-width: 768px) and (min-width: 640px) {
width: 700px;
}
/* 横幅が320px以下のときのスタイル */
@media (max-width: 320px) {
width: 100%;
}
↧