Đơn vị rem trong CSS

Đơn vị em không phải lúc nào cũng tiện lợi. Vấn đề là nếu bạn thay đổi kích thước phông chữ cho một thẻ, thì nó cũng sẽ thay đổi cho tất cả các thẻ con của nó, vốn tính toán kích thước của chúng dựa trên thẻ đó.

Vì vậy, đơn vị rem đã được giới thiệu. Giá trị của các đơn vị này luôn được tính toán dựa trên kích thước phông chữ được thiết lập cho thẻ html.

Như bạn đã biết, giá trị mặc định là 16px:

csshtml {
  font-size: 16px;
}

Hãy xem một ví dụ. Giả sử chúng ta có các thẻ sau:

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

Hãy đặt kích thước cho chúng bằng rem:

cssdiv {
  font-size: 2rem; /* tương ứng 32px */
}
p {
  font-size: 2rem; /* tương ứng 32px */
  margin: 2rem;    /* tương ứng 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>

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