CSSでのレスポンシブなフォントサイズ

ご存知の通り、rem単位はルート要素のフォントサイズ（デフォルトでは 16px）を基準として計算されます：

html {
	font-size: 16px; /* デフォルト値 */
}

この特性を利用して、画面幅の変化に応じてフォントサイズを一括で変更することができます。その方法を見ていきましょう。

次のように要素にサイズが設定されているとします：

h1 {
	font-size: 1.5rem; /* 24pxに対応 */
}
p {
	font-size: 1rem; /* 16pxに対応 */
	margin: 2rem;    /* 32pxに対応 */
}

画面幅が変化した際に、remで指定されたサイズがレスポンシブに変化するようにしましょう。そのために、メディアクエリを用いてルート要素のフォントサイズを変更します：

@media (max-width: 600px) {
	html {
		font-size: 16px;
	}
}
@media (min-width: 600px) and (max-width: 1200px) {
	html {
		font-size: 18px;
	}
}
@media (min-width: 1200px) {
	html {
		font-size: 20px;
	}
}

以下のコードが与えられています：

@media (max-width: 300px) {
	h1 {
		font-size: 32px;
	}
	h2 {
		font-size: 24px;
	}
	p {
		font-size: 16px;
	}
}
@media (min-width: 300px) and (max-width: 900px) {
	h1 {
		font-size: 36px;
	}
	h2 {
		font-size: 27px;
	}
	p {
		font-size: 18px;
	}
}
@media (min-width: 900px) {
	h1 {
		font-size: 40px;
	}
	h2 {
		font-size: 30px;
	}
	p {
		font-size: 20px;
	}
}

このレッスンで説明した手法を用いて、上記のコードを簡略化してください。