レスポンシブウェブデザインの基礎：画面の幅に応じて背景色を変える

レスポンシブウェブデザインの基礎として画面の幅に応じて背景色を変える方法を書き留めておきます。

背景色のベースはピンクで、画面サイズ（幅）が600px以上になったら水色、800px以上になったらオレンジになります。

@charset "utf-8";

body {
    background: pink;
}

@media (min-width: 600px){
    body{
        background: skyblue;
    }
}
@media (min-width: 800px){
    body{
        background: orange;
    }
}

 

以下の動画で実例を示します。画面サイズに応じて背景色が変わっていることが変わっています。

 

 - HTML/JavaScript