レスポンシブにしようとCSSにメディアクエリ記述してるとき、うまくいかなくてわけわかんなくなってくると、「max」と「min」でも混乱してきませんか。わたしだけですか。

頭悪い自分のためにわかりやすい記事を見つけました。
【参考】レスポンシブWebデザインのサイトを作るときのMedia Queriesの順番を考えてみた

PC用のデザインをデフォルトとした場合と、スマホ用のデザインをデフォルトとした場合で、書き方が違う。
なるほど。たしかに。

PCファースト

デフォルトはPC用のスタイル。
タブレット／スマートフォン用のスタイルを上書きしていく。

	/* デフォルト：980px以上用（PC用）の記述 */
@media screen and (max-width: 979px) {
	/* 979px以下用（タブレット用）の記述 */
}
@media screen and (max-width: 767px) {
	/* 767px以下用（タブレット／スマートフォン用）の記述 */
}
@media screen and (max-width: 479px) {
	/* 479px以下用（スマートフォン用）の記述 */
}

モバイルファースト

デフォルトはスマホ用のスタイル。
タブレット／PC用のスタイルを上書きしていく。

	/* デフォルト：479px以下用（スマートフォン用）の記述 */
@media screen and (min-width: 480px) {
	/* 480px以上用（タブレット／スマートフォン用）の記述 */
}
@media screen and (min-width: 768px) {
	/* 768px以上用（タブレット用）の記述 */
}
@media screen and (min-width: 980px) {
	/* 980px以上用（PC用）の記述 */
}

数字が微妙に違ってくるのも混乱するのよね～
「－１」ってのがなんかイヤなんだよな～
キリのいい数字にしちゃダメなのかな～