JSTORのレスポンシブウェブデザイン対応について - ささくれ

先日 JSTORがレスポンシブウェブデザインによるモバイル対応した件[*1]についてのメモです． 表示パターン PCのブラウザでJSTORにアクセスしてブラウザの横幅を変えていくとこんな感じで表示が変わります．目視で気づいたかぎりでは以下の4パターンありました．手元のiPhone 4Sで確認すると縦表示・横表示ともにパターン1になります． 左下が2列になりました． サイドメニューが現れます． サイドメニュー右上が横並びに． ソースを見てみる ヘッダにはこうあります． スタイルシート は入り組んでて嫌になりますがMedia Queriesの箇所を抜き出してみると @media screen and (max-width:319px){...} @media only screen and (max-width:490px),only screen and (max-device-width:490px){...} @media only screen and (max-width:640px),only screen and (max-device-width:640px){...} @media only screen and (max-width:840px),only screen and (max-device-width:840px){...} @media only screen and (max-width:1023px),only screen and (max-device-width:1023px){...} @media only screen and (max-width:1199px),only screen and (max-device-width:1199px){...} となっていました． そんなわけで ブレークポイント としては320px，490px，640px，840pxの4つかなと理解しました（それぞれ上の4パターンに対応）．319px以下で表示すると横スクロールバーが表示されます． 以下のように CSS が読む気にならない感じなので1023pxと1199pxのあたりで何をやってるのかは分かりません．変動幅から固定幅への切り換えかなーと思ったんですがそれは1254pxらしいので．たぶん調べてもいいことはないと思うのでここまで． おまけ：1023pxと1199pxんとこのCSS 整形してメモっておきます．

http://bit.ly/Sr7fcV