メディアクエリについて

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

という感じになります。

カテゴリーcss

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


eleven − 8 =