【メディアクエリ】min-width と max-width のどっちを使う？【もう迷わない】

レスポンシブ対応する時にCSSのメディアクエリを書きますよね。
この時によくあるのが、

コンスキ

min-width と max-width どちらを使えばいいかわからない問題

これを解決しましょう。

スマホ優先ならmin-width、パソコン優先ならmax-width

結論から言うと、次のように判断してください。

min-width と max-width のどちらを使う？

スマホ優先　　▶︎　min-width
パソコン優先　▶︎　max-width

スマホ優先というのは、スマホで表示するのことを第一に考えて書く方法です。

パソコンで表示する時にだけ、特別に上書きするというイメージです。
スマホを優先しているので、パソコン用のCSSはあくまでも、

といった風に捉えると良いかもしれません。
モバイルファーストとも呼びます。

パソコン優先とは、パソコンで表示するの時のことを第一に考えて書く方法です。

今度は逆に、スマホで表示する時に特別に上書きするというイメージです。
パソコンを優先しているので、パソコン用のCSSはあくまでも、

といった風に捉えると良いかもしれません。
デスクトップファーストともいいます。

この2つって非常に覚えにくいですよね。
僕自身、メディアクエリを書くたびに調べてました。

忘れづらい覚え方をいくつか紹介します。

minって聞くとなんか小さい感じしませんか？
反対にmaxは大きい感じがすると思います。

この感覚をデバイスの大きさと結び付けて、

min-width　→　小さいスマホを優先する
max-width　→　大きいパソコンを優先する

というふうに覚えられます。

まずチェック

画面の幅が…
min-width　▶︎　指定した幅より大きい場合に適用したい時に使う
max-width　▶︎　指定した幅より小さい場合に適用したい時に使う

これを不等合に置き換えると覚えやすくなるかもしれません。

真ん中のBについて考えると、
「Aよりも大きくて、Cよりも小さい」という意味ですよね。

このABCの不等号の関係を頭に思い浮かべれば、どっちを使うべきかを知ることができます。

思い出そうとして、

コンスキ

あれどっち使うんだっけ？
合ってるか不安だな。

こんな感じで迷うことでストレスを感じます。
だったらいっそのこと覚えるのをやめてみるのも一つの手です。

参考になりそうなサイトをブックマークに追加して、
どっちを使うかすぐに確認できるようにすればいいんです。

そしたら、考えなくてOK。もう無です笑。