Dimensioni dei caratteri responsive in CSS

Sapete già che le unità rem sono calcolate relativamente alla dimensione del carattere dell'elemento radice, che per impostazione predefinita è 16px:

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

Questa caratteristica viene utilizzata per modificare massivamente le dimensioni dei caratteri al variare della larghezza dello schermo. Vediamo come si fa.

Supponiamo che ai nostri tag siano assegnate le seguenti dimensioni:

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

Facciamo in modo che quando la larghezza dello schermo cambia, le dimensioni impostate tramite rem cambino in modo adattivo. Per fare ciò, utilizzando le media query, cambieremo la dimensione del carattere dell'elemento radice:

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

È dato il seguente codice:

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

Semplificate il codice fornito, utilizzando la tecnica descritta nel tutorial.