メディアクエリについて

モバイルファーストな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) {
}

という感じになります。