Προσαρμοστικά μεγέθη γραμματοσειράς στο CSS

Γνωρίζετε ήδη ότι οι μονάδες rem υπολογίζονται σε σχέση με το μέγεθος γραμματοσειράς του ριζικού στοιχείου, που από προεπιλογή είναι 16px:

html {
	font-size: 16px; /* προεπιλεγμένη τιμή */
}

Αυτή η ιδιαιτερότητα χρησιμοποιείται για να αλλάζουμε μαζικά τα μεγέθη γραμματοσειρών όταν αλλάζει το πλάτος της οθόνης. Ας δούμε πώς γίνεται αυτό.

Ας υποθέσουμε ότι στις ετικέτες μας έχουν οριστεί τα ακόλουθα μεγέθη:

h1 {
	font-size: 1.5rem; /* αντιστοιχεί σε 24px */
}
p {
	font-size: 1rem; /* αντιστοιχεί σε 16px */
	margin: 2rem;    /* αντιστοιχεί σε 32px */
}

Ας κάνουμε έτσι ώστε όταν αλλάζει το πλάτος της οθόνης να αλλάζουν προσαρμοστικά τα μεγέθη, που έχουν οριστεί μέσω rem. Για αυτό, με τη βοήθεια των 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;
	}
}

Δίνεται ο ακόλουθος κώδικας:

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

Απλοποιήστε τον παραπάνω κώδικα, χρησιμοποιώντας την τεχνική που περιγράφεται στο εγχειρίδιο.