jQueryを使って、デバイスの解像度にあわせたレイアウト変更
「CSS3のmedia queryを使って、デバイスの解像度にあわせたレイアウト変更」のfix

media queryに非対応なブラウザを考慮して、同じ動きをiQueryを使った条件分岐で代替え。
デバイスの解像度により、ブラウザの画面サイズが変わります。それにあわせたレイアウトに切り替えます。ブラウザの横サイズを変更して確認してください。※IE9、8、7に対応。
ブラウザの画面横サイズが700px以下、701px〜900px、901px以上の3段階。
「CSS3のmedia queryを使って、デバイスの解像度にあわせたレイアウト変更」ページへ
[ メインカラム ]
デバイスの解像度により、ブラウザの画面サイズが変わります。それにあわせたレイアウトに切り替えます。ブラウザの横サイズを変更して確認してください。

ブラウザの画面横サイズが
700px以下の場合:ヘッダー、メイン、2番目の縦組。
701px〜900pxの場合:ヘッダーの下にメイン、2番目の横2カラム。
901px以上の場合:ヘッダーの下にメイン、2番目、3番目の横3カラム。
バックグラウンドの色も変わります。

現在のブラウザ画面横幅:ピクセル

media queryに対応していない場合、専用のcssを読込めないので、バックグラウンドは白、各カラムは縦組になります。
[ 2番目カラム ]
[ 3番目カラム ]
--- 戻る ---