Адзінкі rem у CSS

Адзінкі em не заўсёды зручныя. Праblemа ў тым, што калі змяніць памер шрыфту аднаму тэгу, то ён зменіцца і ўсім яго тэгам-нашчадкам, якія разлічваюць свой памер адносна яго.

Таму былі ўведзены адзінкі rem. Значэнні гэтых адзінак заўсёды разлічваюцца адносна памеру шрыфту, зададзенага для тэга html.

Як вы ўжо ведаеце, па змаўчанні гэта значэнне роўнае 16px:

html {
	font-size: 16px;
}

Давайце паглядзім на прыкладзе. Хай у нас ёсць вось такія тэгі:

<div>
	<p>
		text
	</p>
</div>

Давайце ўкажам ім памеры ў rem:

div {
	font-size: 2rem; /* адпавядае 32px */
}
p {
	font-size: 2rem; /* адпавядае 32px */
	margin: 2rem;    /* адпавядае 32px */
}

Хай у нас ёсць HTML код, для якога мы будзем вырашаць задачы:

<main>
	<h1>header</h1>
	<section>
		<h2>header</h2>
		<p>
			text
		</p>
		<p>
			text
		</p>
	</section>
	<section>
		<h2>header</h2>
		<p>
			text
		</p>
		<p>
			text
		</p>
	</section>
</main>

Перапішыце ў rem усе адзінкі, зададзеныя ў пікселях:

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