メディアクエリを使って、ブレークポイントごとにCSSを分けるのは今では一般的に行われています。
メディアクエリの書き方には、max-widthとmin-widthがあります。
ここで指定する画面サイズと実際のブレークポイントの対応をいつも混乱するので、まとめておこうと思います。
max-widthやmin-widthの画面サイズはそのサイズを含む
メディアクエリの画面サイズを指定する時に、≧、≦、<、>なのかというのをいつも悩みます。
結論から言えば、常にそのサイズを含む、というのが正しいです。
max-width:1000pxなら、width≦1000pxです。
min-width:1000pxなら、1000px≦widthです。
なので、同じwidthをmax-widthとmin-widthで指定すると、どちらも有効になりますので、後に書かれた方が有効になってしまいます。
1つのブレークポイントでmax-widthとmin-widthを記述する時には、同じ値を指定してはいけない。
境界でダブらないように画面サイズを指定するには?
min-widthはmax-widthよりも+1px大きくしてすれば、もれなくカバーできることになります。
min側 = max側 + 1px
@media screen and (max-width:1000px) {
/*~1000pxの設定*/
}
@media screen and (min-width:1001px) {
/*1001px~の設定*/
}
/*
@media以外の所は全てのサイズで読み込まれます。
*/
p {
color:red;
}
@media screen and (min-width:480px) {
/* 画面サイズが480pxからはここを読み込む */
p { color:#ededed;}
}
@media screen and (min-width:768px) and ( max-width:1023px) {
/* 画面サイズが768pxから1023pxまではここを読み込む */
p {}
}
@media screen and (min-width:1024px) {
/* 画面サイズが1024pxからはここを読み込む */
}
まとめ
media queryは、最初に画面サイズ毎に分けて書いてしまえば混乱することも無いのですが、既存のサイトのカスタマイズでメディアクエリを書き足す時に漏れなくダブりなく書くときに混乱するのでまとめておきました。