【css】MediaQueryを使ってみた

PCとスマホのページを1ソースで作るために、ウィンドウの幅に応じてスタイルを変更する、css3のMediaQueryを使ってみました。

@media screen and (max-width: 640px) {
    body {
        background-color: red;
    }
}

MediaQueryを使用する時は、Mediaを明示的に指定しないといけません。

なので、上のcssは、Mediaがscreenなおかつウィンドウ幅が640px以下の場合に適用されます。

複数条件の指定などもできるみたいなので、いろいろ応用ができそう。