スマホでもデザインが崩れないようにcssを記述するためにメディアクエリを使っているのにうまく効かない！なんで？？？(スペルミスやセレクタの指定方法間違いは除いて)
前提として・・・
@media screen and(ここにはmax-widthかmin-widthどっちのパターンでも描ける){}
- スマホcssをメインに書く＋それにPCやタブレットcssを追加するなら、min-widthを使う
- PCのcssをメインで書く＋それにスマホやタブレットのcssを追加していくなら、max-widthを使う
結論
max-widthを使う場合、
ブレイクポイントが小さい順に書いてしまうと、スタイルが上書きされてしまうから。
@media screen and(max-width: 1200px){何かしらつけたいスタイル….}
@media screen and(max-width: 1000px){何かしらつけたいスタイル….}
のように、max-widthが大きい順にスタイルを記述していこう！
逆に、min-widthを使うときは、ブレイクポイントが小さい順からスタイルを記述していこう！
@media screen and(min-width: 400px){何かしらつけたいスタイル….}
@media screen and(min-width: 800px){何かしらつけたいスタイル….}
補足
ここからここまで、と範囲を指定することも可能
@media screen and (min-width:768px) and ( max-width:1024px) {
/* 画面サイズが768pxから1024pxまではここを読み込む */
.class{…}
}