モバイルファーストなWebサイト制作がどんどん主流になってくる中、自分の周辺ではまだまだPCサイトのみの案件が多いです。じきにこの状況もひっくり返るんですかね。
そんなこんなで、メディアクエリの書き方をメモ。
モバイルの基準は現時点(2014.07)ではiOSを目安にしています。
iOSでviewportに何も記述しない場合のデフォルトが980pxだったと思うので、PCはそれを基準に指定。
PCファーストな書き方
/* over 980px */ @media screen and (max-width: 980px) { } @media screen and (max-width: 480px) { }
モバイルファーストな書き方
/* under 480px */ @media screen and (min-width: 481px) { } @media screen and (min-width: 981px) { }
上から順に上書きしていくような感じで実装されてます。
しっかり指定な書き方
/* stric */ @media only screen and (min-width: 981px) { } @media only screen and (min-width: 481px) and (max-width: 980px) { } @media only screen and (max-width: 480px) { }
その他、Google推奨の書き方もあります。
/* over 640px */ @media only screen and (max-width: 640px) { }
という感じになります。