レスポンシブ対応でコーディングする時、
メディアクエリどう書こうか？ブレイクポイントいくつにしよう？
って、毎回考えませんか？
この記事では、そんな悩みを抱えている方のために、僕がよく使うレスポンシブ対応のためのPCファースト、モバイルファーストそれぞれのメディアクエリを紹介しています。
僕自身、
メディアクエリのブレイクポイントっていくつだっけ？？？
となることも多々あるので、コーディング時のためのコピペ用も兼ねてまとめています。
ブレイクポイントの考え方が人によって異なると思いますので、あくまで僕個人の考えであることをご了承ください。
PCファーストのメディアクエリ
まず、PCファーストのメディアクエリです。
/*----------------------------------------------------------*/
/* PC用のCSS */
/*----------------------------------------------------------*/
/*----------------------------------------------------------*/
/* タブレット用のCSS */
/*----------------------------------------------------------*/
@media only screen and (min-width:600px) and (max-width: 1024px) {}
/*----------------------------------------------------------*/
/* スマホ用のCSS */
/*----------------------------------------------------------*/
@media not all and (min-width: 600px) {}1024pxより大きい画面幅（1024pxは含めない）にPC用を、600px以上1024px以下の画面幅にタブレット用のCSSとします。
600px未満の画面幅にスマホ用のCSSを記述するメディアクエリです。
1024pxにした理由は、縦画面でのタブレットの最大幅が1024pxであることと最もシェア率の高いタブレットサイズが768px × 1024pxだからです。
最大幅1024pxのタブレットのシェア率は１％未満で多くありませんが、最もシェア率の高いデバイスを横画面にしたときの画面幅が1024pxとなるため、1024pxをPC・タブレット間のブレイクポイントにすることにしました。
スマホ・タブレット間のブレイクポイントは、タブレットの最小画面幅が600pxであるため、600pxをブレイクポイントとしました。
過去には、
@media only screen and (max-width: 600px){}と記述していましたが、599.5pxのような中途半端な画面幅はどうなるのかという議論を見かけたため、600px未満（最小サイズ600pxより小さい）を、
@media not all and (min-width: 600px) {}で表現しています。
PCファーストでもモバイルファーストでも、未満や以下、以上の表現には注意していこうと思った次第です。
モバイルファーストのメディアクエリ
下記がモバイルファーストのメディアクエリです。
/*----------------------------------------------------------*/
/* スマホ用のCSS */
/*----------------------------------------------------------*/
/*----------------------------------------------------------*/
/* タブレット用のCSS */
/*----------------------------------------------------------*/
@media only screen and (min-width:600px){}
/*----------------------------------------------------------*/
/* PC用のCSS */
/*----------------------------------------------------------*/
@media not all screen and (max-width:1024px){}ブレイクポイントの決定基準は、PCファーストのメディアクエリと同じです。
モバイル表示はPC表示に比べてシンプルなレイアウトやデザインになることが多いため、モバイルファーストのほうがコーディングしやすい言われています。
僕自身、モバイルファーストでの経験が少ないので何とも言えませんが、シンプルから複雑へのコーディングのほうが効率がいいのではないかと思っています。
終わりに
今回は、レスポンシブ対応のためのPCファースト、モバイルファーストそれぞれのメディアクエリを僕自身が考えるブレイクポイントを基準に紹介しました。
人によって考え方が異なり、僕自身、僕の考えの良し悪しがわからないので、ご意見をいただけると嬉しいです。
Coment