Unidades rem em CSS

As unidades em nem sempre são convenientes. O problema é que se você alterar o tamanho da fonte de uma tag, ele também será alterado para todas as tags descendentes que calculam seu tamanho em relação a ela.

Por isso, foram introduzidas as unidades rem. Os valores dessas unidades são sempre calculados em relação ao tamanho da fonte definido para a tag html.

Como você já sabe, por padrão esse valor é 16px:

csshtml {
  font-size: 16px;
}

Vamos ver um exemplo. Suponha que temos as seguintes tags:

html<div>
  <p>
    texto
  </p>
</div>

Vamos definir seus tamanhos em rem:

cssdiv {
  font-size: 2rem; /* corresponde a 32px */
}
p {
  font-size: 2rem; /* corresponde a 32px */
  margin: 2rem;    /* corresponde a 32px */
}

Задание 1

Suponha que temos um código HTML, para o qual resolveremos problemas:

html<main>
  <h1>cabeçalho</h1>
  <section>
    <h2>cabeçalho</h2>
    <p>
      texto
    </p>
    <p>
      texto
    </p>
  </section>
  <section>
    <h2>cabeçalho</h2>
    <p>
      texto
    </p>
    <p>
      texto
    </p>
  </section>
</main>

Reescreva em rem todas as unidades definidas em pixels:

cssmain {
  margin: 4rem auto 2rem; /* 64px / 16 = 4rem, 32px / 16 = 2rem */
}

h1 {
  font-size: 2rem; /* 32px / 16 = 2rem */
}
section {
  font-size: 1rem; /* 16px / 16 = 1rem */
  margin-bottom: 2rem; /* 32px / 16 = 2rem */
}
h2 {
  font-size: 1.5rem; /* 24px / 16 = 1.5rem */
  margin-bottom: 2rem; /* 32px / 16 = 2rem */
}
p {
  font-size: 1.25rem; /* 20px / 16 = 1.25rem */
  margin-bottom: 0.75rem; /* 12px / 16 = 0.75rem */
}