CSS media query によるスタイル切り替え

ウィンドウの幅を変化させると、背景色と下の幅数が変わります。
Firefox 3.5、Opera 9.64、Safari 4.0.1、Google Chrome 2.0.172.33 で動作確認済み。
IE6,7,8 では動作しません。

ウィンドウの幅 px

CSS コード

<style type="text/css" media="screen and (max-width: 500px)">
<!--
body {
    background-color: #fcc;
}
#note:after {
    content: "500";
}
-->
</style>
<style type="text/css" media="screen and (min-width: 500px) and (max-width: 1000px)">
<!--
body {
    background-color: #cfc;
}
#note:after {
    content: "500 ~ 1000";
}
-->
</style>
<style type="text/css" media="screen and (min-width: 1000px)">
<!--
body {
    background-color: #ccf;
}
#note:after {
    content: "1000";
}
-->
</style>

参考：another great CSS media query demo at hacks.mozilla.org
　　　CSSメモ: メディアクエリ
　　　Media Queries