Aanpasbare fontgroottes in CSS

Jy weet reeds dat die eenhede rem bereken word relatief tot die fontgrootte van die wortelelement, wat by verstek gelyk is aan 16px:

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

Hierdie eienskap word gebruik om fontgroottes grootskaals te verander wanneer die skermwydte verander. Kom ons kyk hoe dit gedoen word.

Laat ons sê die volgende groottes is aan ons etikette toegeken:

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

Kom ons maak dit so dat wanneer die skermwydte verander, die groottes wat deur rem toegeken is, aanpasbaar verander. Hiervoor sal ons die fontgrootte van die wortelelement verander met behulp van media-navrae:

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

Die volgende kode word gegee:

@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 die gegewe kode deur die tegniek wat in die handboek beskryf word te gebruik.