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

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;
	}
}