メディアクエリが効かない・・・[私の場合]
クライアント要求
「LP作って！共通部分（ヘッダフッタ）は、今公開中のサイトからとってきてとりあえずはめといて！」
どうやらクライアントにはお抱えのエンジニアがいるはいるようですが、
手いっぱいなようで、コーディングだけをご依頼頂きました。
納品はデータ納品です。
サーバーもさわれません。
これは力技。
ブラウザの「名前をつけて保存」でページごと保存して
ファイル名やパスを変更するしかありません。
まぁよくあることです。
LPのコーディングが終わり、
開発者ツールでPCとSPの表示を確認。
・・・SP表示がおかしい！
メディアクエリが効いてない！
そんなときのチェックポイント並びに解決方法をご紹介します。
チェックポイント１：CSS読み込み
多分これはないと思いますが、
メディアクエリを書いたCSSは読み込まれてますか？
チェックポイント２：記述の確認
メディアクエリの記述パスにお間違いないですか？
@media screen and (max-width: 360px) {
.demo{ color #ff0000; }
}
「@media screen and (max-width: 360px) {}」
・幅などの数値を見直し
・max、minの部分の見直し
・閉じタグの見直し
チェックポイント３：Viewportの確認
これは、PCでの確認では問題ないのに、スマホ実機で見ると適用されていない時の解決方法です。
私の場合、これが原因でした。
＜meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"＞
これをhead内に追加したら無事メディアクエリが効きました！
※上記コードの<>は全角にしています。実装の際は半角でどうぞ！
