レスポンシブレイアウトの基本設定



サイトをレスポンシブにする場合にまず最初に設定することのまとめ。

ブレークポイントを決める

レイアウトを切替る画面サイズを決めます。
PC・タブレット・スマートフォンそれぞれに対応したレイアウトにするなら

PC向け       768px以上
タブレット向け   768pxまで
スマートフォン   480pxまで

こんな感じでしょうか。

ちょっと使わないとすぐ忘れてしまうので、iphoneなどのデバイスの解像度を一覧にまとめておきます。

端末画面サイズ(inch)画面解像度(px)デバイスピクセル比ブラウザサイズ
iPhone43.5インチ640 x 9602.0320 x 480
iPhone5/5s4インチ640 x 11362.0320 x 568
iPhone64.7インチ750 x 13342.0375 x 667
iPhone6 plus5.5インチ1080 x 19202.0414 x 738
iPad mini9.7インチ1536 x 20482.0768 x 1024
iPad7.9インチ1536 x 20482.0768 x 1024

View Portの設定

実際のHTMLファイルにviewportの設定をします。

<meta name="viewport" content="width=device-width,,initial-scale=1>

 IE8以下の対応

IE8以下ではhtml5やメディアクエリーに対応していないため、javascriptを設定します。

html5shiv.jsを入れる

 https://code.google.com/p/html5shiv/

<!--[if lt IE 9]>
<script src="html5shiv.js"></script>
<![endif]-->

css3-mediaqueries.jsを入れる

https://code.google.com/p/css3-mediaqueries-js/

<!--[if lt IE 9]>
<script src="js/css3-mediaqueries.js"></script>
<![endif]-->

 CSSの設定

ブレイクポイントをしていたサイズに応じてmedea queryを設定します。

@media screen and (min-width:768px){
	768px以上(主にPC)のcssを書く 
}

@media screen and (max-width:767px){
	768px未満(タブレット以下)のcssを書く 
}

もっと細かく設定するなら

@media screen and (min-width: 980px) {
	/* 980px以上 */
@media screen and (min-width: 768px) and (max-width: 979px) {
	/* 768px以上979px以下 */
}
@media screen and (min-width: 480px) and (max-width: 767px)  {
	/* 480px 以上 767px以下 */
}
@media screen and (max-width: 479px) {
	/* 479px以下*/
}

メディアクエリーの記述方法には、

・モバイルファーストか
・PCファーストか
という考え方の違いで記述方法も変わってくると思います。