レスポンシブルデザインで作成するときの流れと ブレイクポイントあたり

【レスポンシブルデザインで作る時の流れ】

１．一番小さい画面設定でHTMLとCSSつくる

２．画面レイアウトが変わるポイントを決める
　　このポイントがブレイクポイント

３．ブレイクポイントごとのレイアウト変更をCSSに書き込む

[ブレイクポイントの記述]

CSSで @media screen で記述する
現状では

画面幅９６０以上でsubコンテンツを右側に表記するようにしている。
実際の記述は　768pxと960pxで変更するように記述したつもり。

960でサブコンテンツが移動するのは動いている。

ココでsubをcontents内の右側へ移動してる
しかしなぜfloat設定はleftなんだっけか
#contents #sub{
float: left;
margin: 0 10px;}

あとココで
contents幅960をどのように使っているかで
mainは600px
subは300px
#contents #main{width: 600px;}/*660/960*/
#contents #sub{width: 300px;}/*300/960*/

/*768-1023*/
@media screen and (min-width : 768px){
#contents { text-align : left}
}

/*1024*/
@media screen and (min-width : 960px){

#contents{
overflow: hidden;
width: 960px
}
#contents #main,
#contents #sub{
float: left;
margin: 0 10px;}

#contents #main{width: 600px;}/*660/960*/
#contents #sub{width: 300px;}/*300/960*/

}

以下、資料になりそうなもの
http://web-codery.com/html/103より

/* @media メディアタイプ and (条件) { } */
@media screen and (max-width: 959px) {
#container {
width: 100%;
}
}
@media screen and (min-width: 960px) {
#container {
widht: 960px;
margin: 0 auto;
}
}

[メディアタイプ]の部分にはscreen, tv, allなど、linkタグでCSSを読み込む時に指定するmedia属性と同じメディアタイプを指定します。PCやスマホのブラウザを対象にする場合はscreenになります。
[条件]の部分には、ウィンドウの最小サイズを指定するmin-width, スマホなどで画面の向き（縦横）を指定するorientationなど、スタイルを適用する条件を指定します。ブラウザ幅でスタイルを切り替える場合は、min-width, max-widthを使います。

上の例で#containerがbody直下にある場合、ブラウザ幅が959px以下では#containerの幅がブラウザ幅いっぱい、ブラウザ幅が960px以上の場合#containerの幅は960pxで、左右のマージンをautoにすることでセンタリングしています。もちろん、body自体に幅指定がされていない（幅100%）ことが前提です。