CSS | メディアクエリで画面幅に合わせてスタイルを変更する方法

2022-06-27CSS メディアクエリ,CSS

CSSのメディアクエリを使って画面幅（ウィンドウサイズ）に合わせてスタイルを変更する方法を紹介しています。

メディアクエリで画面幅に合わせてスタイルを変更する

See the Pen CSS | Adjust icons and text by yochans (@yochans) on CodePen.

メディアクエリ（@media）を使って画面幅、ウィンドウサイズで適用しているスタイルを変更するCSSのサンプルコードになります。

サンプルでは画面幅が600px以上の場合は背景色を白色（#FFF）に、600px以下の場合は背景色を黒色（#000）になるように指定しています。

/* 600px以上の場合 */
@media (min-width: 600px) {
	body {
		background-color: #FFF;
	}
}

/* 600px以下の場合 */
@media (max-width: 600px) {
	body {
		background-color: #000;
	}
}