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

2015-02-222015-03-08

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

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

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

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

こんな感じでしょうか。

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

 

端末	画面サイズ（inch)	画面解像度(px)	デバイスピクセル比	ブラウザサイズ
iPhone4	3.5インチ	640 x 960	2.0	320 x 480
iPhone5/5s	4インチ	640 x 1136	2.0	320 x 568
iPhone6	4.7インチ	750 x 1334	2.0	375 x 667
iPhone6 plus	5.5インチ	1080 x 1920	2.0	414 x 738
iPad mini	9.7インチ	1536 x 2048	2.0	768 x 1024
iPad	7.9インチ	1536 x 2048	2.0	768 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ファーストか
という考え方の違いで記述方法も変わってくると思います。