CSS3のmedia queryを使って、デバイスとブラウザ画面の横サイズ確認、振り分け

CSS3のmedia queryを使って、ブラウザ画面の横サイズを大雑把に確認し、振り分けます。サイズに合わせたデザインの変更などをjavascriptを使わず可能にします。ブラウザの横サイズを変えると確認できます。※IEは9以上で対応。
ブラウザ画面の横サイズが、600pxより小さいと、このボックス内がピンクになります。
ブラウザ画面の横サイズが、900pxより大きいと、このボックス内がオレンジ色になります。
ブラウザ画面の横サイズが、600pxから900pxの間だと、このボックス内が水色になります。
iPhoneやiPod touchのSafariで見ると、上のオレンジ色にプラスして、このボックス内がグレーになります。

現在のブラウザ画面の横サイズは： 600pxより小さい 600pxから900pxの間 900pxより大きい