Rem vienības CSS

em vienības ne vienmēr ir ērtas. Problēma ir tāda, ka, ja maina fonta izmēru vienai atzīmei, tas mainās arī visām tās pēcteču atzīmēm, kuras aprēķina savu izmēru attiecībā pret to.

Tāpēc tika ieviestas rem vienības. Šo vienību vērtības vienmēr tiek aprēķinātas attiecībā pret fonta izmēru, kas iestatīts html atzīmei.

Kā jūs jau zināt, pēc noklusējuma šī vērtība ir 16px:

html {
	font-size: 16px;
}

Apskatīsim piemērā. Pieņemsim, ka mums ir šādas atzīmes:

<div>
	<p>
		teksts
	</p>
</div>

Norādīsim tiem izmērus rem:

div {
	font-size: 2rem; /* atbilst 32px */
}
p {
	font-size: 2rem; /* atbilst 32px */
	margin: 2rem;    /* atbilst 32px */
}

Pieņemsim, ka mums ir HTML kods, kuram mēs risināsim uzdevumus:

<main>
	<h1>virsraksts</h1>
	<section>
		<h2>virsraksts</h2>
		<p>
			teksts
		</p>
		<p>
			teksts
		</p>
	</section>
	<section>
		<h2>virsraksts</h2>
		<p>
			teksts
		</p>
		<p>
			teksts
		</p>
	</section>
</main>

Pārrakstiet rem visas vienības, kas norādītas pikseļos:

main {
	margin: 4rem auto 2rem;
}

h1 {
	font-size: 2rem;
}
section {
	font-size: 1rem;
	margin-bottom: 2rem;
}
h2 {
	font-size: 1.5rem;
	margin-bottom: 2rem;
}
p {
	font-size: 1.25rem;
	margin-bottom: 0.75rem;
}