Единицы 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;
}