Media Queriesを使用して1ソースでレスポンシブ対応をする

1.HTML内にMedia Queriesの記述をする方法

  • 表示領域の横幅によって色が変わります

※対応するブラウザサイズのみ色が変わるようになっています。

横幅が960以上(min-width: 961px)
背景がグレーになります
横幅が960以下(max-width: 960px)
背景がオレンジになります
横幅が480以下(max-width: 480px)
背景がブルーになります