Единицы rem в CSS

Единицы em не всегда удобны. Проблема в том, что если сменить размер шрифта одному тегу, то он изменится и всем его тегам-потомкам, которые рассчитывают свой размер относительно него.

Поэтому были введены единицы 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: 64px auto 32px;
}

h1 {
	font-size: 32px;
}
section {
	font-size: 16px;
	margin-bottom: 32px;
}
h2 {
	font-size: 24px;
	margin-bottom: 32px;
}
p {
	font-size: 20px;
	margin-bottom: 12px;
}