CSSメディアクエリ入門

特別なコマンド @media があり、画面の幅に応じて異なるコードを実行することができます。

次の例では、画面の幅が 300px から 1200px までの場合にコードが動作します：

@media (min-width: 300px) and (max-width: 1200px) {
	/* 何らかのコード */
}

次の例では、画面の幅が 300px より大きい場合にコードが動作します：

@media (min-width: 300px) {
	/* 何らかのコード */
}

次の例では、画面の幅が 1200px より小さい場合にコードが動作します：

@media (max-width: 1200px) {
	/* 何らかのコード */
}

メディアクエリの中に何かコードを書いてみましょう。例えば、特定の画面サイズで段落を赤色にします：

@media (min-width: 300px) and (max-width: 1200px) {
	p {
		color: red;
	}
}

@media (min-width: 300px) and (max-width: 1200px) {
	p {
		color: red;
	}
}

今度は、画面の幅に応じて段落を異なる色にしてみましょう：

@media (max-width: 300px) {
	p {
		color: red;
	}
}
@media (min-width: 300px) and (max-width: 900px) {
	p {
		color: green;
	}
}
@media (min-width: 900px) and (max-width: 1200px) {
	p {
		color: blue;
	}
}
@media (min-width: 1200px) {
	p {
		color: orange;
	}
}

次のコードを、幅 0 から 800px の画面に適用させてください：

p {
	font-size: 20px;
}

次のコードを、幅 800px 以上の画面に適用させてください：

p {
	font-size: 30px;
}

次のコードを、幅 0 から 500px の画面に適用させてください：

p {
	font-size: 15px;
}

次のコードを、幅 500px から 900px の画面に適用させてください：

p {
	font-size: 20px;
}

次のコードを、幅 900px 以上の画面に適用させてください：

p {
	font-size: 30px;
}