【CSS】メディアクエリを使ってレスポンシブWebを作る

メディアクエリと、Flexboxを使って、PC・タブレット・スマホと、3段階の画面サイズに合わせてレスポンシブWebを作ってみました。
サンプルページ：https://exp.hazu.jp/media-query/media-query.html
仕組みをまとめてみたいと思います。

どのように表示させたいのか

スマホ縦 → １カラン
スマホ横・タブレット縦 → ２カラン
タブレット横・PC → ３カラン

ディバイスによるブレイクポイント

3段階の画面サイズに合わせて切り替えたいのですが、ブレイクポイントは何ピクセルにするのか、というのが問題ですね。Googleのディベロッパーツールによれば、こうなっています。
（以下の単位はCSS で利用する「CSS ピクセル」で「画面解像度」ではありません。iOS では「csspx」、Android では「dp」。）

スマートフォン

対応	横幅	高さ
iPhone 5/SE	320	568
iPhone 6/7/8	375	667
iPhone 6/7/8 Plus	414	736
iPhone X	375	812
Android（ほとんどのスマホ）	360	640

タブレット

端末	横幅	高さ
iPad	768	1024
iPad Pro	1024	1366
Android Sサイズ	600	960
Android Mサイズ	768	1024
Android Lサイズ	800	1280

これより、こんな3段階にしてみました。

メディアクエリ区分け（width）

スマホ縦：～499px
スマホ横＋タブレット縦：　500px ～ 800px
タブレット横＋PC：　801px～

メディアクエリ

＜ HTMLのメタ情報＞
まず、HTML の<head>の部分で、で、「ビューポート＝ディバイスの画面サイズ」になるように指示します。
（「ビューポート」については、前回、まとめました。→ 【CSS】よく使う単位 & ビューポート単位）

<meta name="viewport" content="width=device-width,initial-scale=1">

＜メディアクエリの書き方＞
CSS のメディアクエリを利用して、ブレイクポイントごとに条件分けしていきます。

@media screen and (max-width:499px) { /* １カランになるよう記述 */ }
@media screen and (min-width:500px) and (max-width:800px) { /* ２カランになるよう記述 */ }
@media screen and (min-width:801px){ /* ３カランになるよう記述 */ }

＜ CSS例＞

/* スマホ縦対応 1カラン */
@media screen and (max-width:499px) { 
.flex-container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;	
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}

.item {
	width: 100%;
}
}

/* スマホ横＆タブレット縦対応 ２カラン */
@media screen and (min-width:500px) and (max-width:800px) {
.flex-container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-direction: row;
	flex-direction: row;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}

.item {
	width: 50%;
}
}

/* タブレット横＆ＰＣ対応 3カラン */
@media screen and (min-width:801px){
.flex-container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-direction: row;
	flex-direction: row;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}

.item {
	width: 33.3%;
}
}