CSSにおけるrem単位

em単位は常に便利とは限りません。問題は、あるタグのフォントサイズを変更すると、そのサイズを基準に計算しているすべての子孫タグのサイズも変わってしまう点です。

そのため、rem単位が導入されました。この単位の値は、常にhtmlタグに設定されたフォントサイズを基準として計算されます。

ご存知の通り、デフォルトではこの値は 16pxです:

csshtml {
  font-size: 16px;
}

例を見てみましょう。次のようなタグがあるとします:

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

これらにrem単位でサイズを指定してみましょう:

cssdiv {
  font-size: 2rem; /* 32pxに対応 */
}
p {
  font-size: 2rem; /* 32pxに対応 */
  margin: 2rem;    /* 32pxに対応 */
}

Задание 1

以下のHTMLコードに対して問題を解いてみましょう:

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で書き直してください:

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