Rem vienetai CSS

em vienetai ne visada yra patogūs. Problema tai, kad jei pakeisite šrifto dydį vienai ženklui, tai jis pasikeis ir visiems jo palikuonims ženklams, kurie apskaičiuoja savo dydį santykinai jo.

Štai kodėl buvo įvesti rem vienetai. Šių vienetų vertės visada skaičiuojamos santykiu su šrifto dydžiu, nustatytu ženklui html.

Kaip jau žinote, pagal nutylėjimą ši reikšmė yra lygi 16px:

html {
	font-size: 16px;
}

Pažiūrėkime pavyzdžiu. Tarkime, mes turime šiuos ženklus:

<div>
	<p>
		tekstas
	</p>
</div>

Nustatykime jiems dydžius rem vienetais:

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

Tarkime, mes turime HTML kodą, kuriam mes spręsime uždavinius:

<main>
	<h1>antraštė</h1>
	<section>
		<h2>antraštė</h2>
		<p>
			tekstas
		</p>
		<p>
			tekstas
		</p>
	</section>
	<section>
		<h2>antraštė</h2>
		<p>
			tekstas
		</p>
		<p>
			tekstas
		</p>
	</section>
</main>

Perrašykite į rem visus vienetus, nurodytus pikseliais:

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