max-widthとmin-width

WEBデザインをモバイルファーストで作成する時は、mediaクエリはmin-widthを使用。

ベースはスマホ用のデザインなので、PCでデザインを確認する時、まずスマホ用のデザインがブラウザにレンダリングされる。

それからスマホサイズまで画面を縮めていく。

スマホデザインなので問題ない。

その後は画面サイズを大きくしていきこれ以上画面サイズが大きくなったら例えばタブレットのデザインを上書きして…また最小幅???pxでこれ以上の画面サイズになったら今度はPCデザインで上書きするというようにデザインを上書きしていく。

なのでmin-widthを使う！

PCファーストでは、ベースがPCサイトデザインなので、先づ画面サイズをスマホ用のサイズまでPCブラウザを縮めて行きます。

最大幅がこの画面サイズまではスマホ用でデザインにしたいので先づ上書き！このサイズまではということでmax-widthとなります。

その先は同じで、またここまではこのデザインというようにデザインを上書きします。

このように考えるとmax-widthとmin-widthの使い分けがなんかしっくりくるかな～～（≧∇≦）

なんかわかったつもりでまた忘れるのでとょっとメモ。v(^-^)v