Responsieve lettergrootten in CSS

Je weet al dat de eenheden rem worden berekend ten opzichte van de lettergrootte van het root-element, die standaard 16px is:

html {
	font-size: 16px; /* standaardwaarde */
}

Deze eigenschap wordt gebruikt om lettergroottes op grote schaal te wijzigen wanneer de schermbreedte verandert. Laten we eens kijken hoe dat wordt gedaan.

Stel dat de volgende groottes zijn ingesteld voor onze tags:

h1 {
	font-size: 1.5rem; /* komt overeen met 24px */
}
p {
	font-size: 1rem; /* komt overeen met 16px */
	margin: 2rem;    /* komt overeen met 32px */
}

Laten we ervoor zorgen dat de groottes die zijn ingesteld via rem responsief veranderen wanneer de schermbreedte wijzigt. Hiervoor zullen we de lettergrootte van het root-element wijzigen met behulp van media queries:

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

De volgende code is gegeven:

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

Vereenvoudig de gegeven code met behulp van de in de les beschreven techniek.