メディアクエリの min-width, max-width どっちがどっち？

メディアクエリとはよくCSSに、@media screen や @media (min-width: 600px) などのように書かれているあれです。
画面サイズがどうなったときにそれが適用されるのか混乱したので、自分なりに整理しました。

何を基準に取っているかだけだった。

@mediaのmin-widthなどは基本的に、境目を設定していこうぜ！というイメージです。

• minは小さいものを基準に境目を設定する
• maxは大きいものを基準に境目を設定する

というだけでした。

min-widthの場合、小さいpxから出発して順に境目を超えた場合の処理を書いていきます。
max-widthは基準が大きい方からとなるだけです。なので大きいpxから順に、境目を超えた場合の処理を書いていきます。

簡単な例も載せておきます。

画面サイズに応じて背景色を変えることを考えます。最初の色を白にします。
まず、CSSに

body{
	background-color: white;
}

と設定しておきます。

さて、ここからメディアクエリを追記していきますが、このときmin-widthを使う場合は画面が小さいとき(モバイルなど)が基準となるという意味です。
そして、小さいところから画面を広げていき、色が変わる境界を、min-widthで設定していこうぜ！という感じです。

なので、以下を追記すると

@media (min-width: 600px){
	body{
		background-color: red;
	}
}

0px(min-width)からどんどん画面サイズが大きくなっていき、白い背景だったのが、600pxを超えると赤になります。

繰り返しになりますが、
min-widthは小さいサイズから広がる方向に実行処理を書いていき、
max-widthは大きいサイズから縮小する方向に実行処理を書いていきます。