Media Queriesを使用して1ソースでレスポンシブ対応をする
1.HTML内にMedia Queriesの記述をする方法
- 表示領域の横幅によって色が変わります
※対応するブラウザサイズのみ色が変わるようになっています。
- 横幅が960以上(min-width: 961px)
- 背景がグレーになります
- 横幅が960以下(max-width: 960px)
- 背景がオレンジになります
- 横幅が480以下(max-width: 480px)
- 背景がブルーになります
※対応するブラウザサイズのみ色が変わるようになっています。