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

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

レイアウトを切替る画面サイズを決めます。
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の設定をします。

 IE8以下の対応

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

html5shiv.jsを入れる

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

css3-mediaqueries.jsを入れる

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

 CSSの設定

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

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

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

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