Bài 5. Đơn vị và giá trị: px, em, rem, %, vw, calc, clamp

Một số khái niệm

Khuyến nghị: dùng rem cho cỡ chữ và khoảng cách để tôn trọng cài đặt cỡ chữ của người dùng (người cao tuổi thường phóng to chữ trong trình duyệt); px cho viền mảnh; %, fr cho bố cục.

em và rem khác nhau thế nào

<style>
  html { font-size: 16px; }
  .hop { font-size: 20px; border: 1px solid #ccc; padding: 6px; margin: 6px 0; }
  .em { font-size: 1.5em; }   /* 1.5 x 20px = 30px (theo cha) */
  .rem { font-size: 1.5rem; } /* 1.5 x 16px = 24px (theo html) */
</style>
<div class="hop">Cha 20px
  <div class="em">1.5em = 30px</div>
  <div class="rem">1.5rem = 24px</div>
</div>

calc(), min(), max(), clamp()

<style>
  .khung { width: calc(100% - 40px); margin: 0 20px; background: #e3f2fd; padding: 8px; box-sizing: border-box; }
  .tieu-de { font-size: clamp(1.25rem, 4vw, 2.5rem); color: #1565c0; margin: 8px 0; }
  .the { width: min(100%, 360px); background: #e8f5e9; padding: 10px; border-radius: 8px; }
  .doan { max-width: 60ch; }
</style>
<div class="khung">calc(100% - 40px)</div>
<h2 class="tieu-de">Cỡ chữ clamp: thu nhỏ cửa sổ để thấy co giãn</h2>
<div class="the">min(100%, 360px): không quá 360px</div>
<p class="doan">Giới hạn dòng khoảng 60 ký tự giúp đọc dễ hơn trên màn hình rộng.</p>

clamp(min, ưu-tiên, max): giá trị ưu tiên (thường theo vw) nhưng không nhỏ hơn min, không lớn hơn max. Đây là cách làm cỡ chữ co giãn không cần media query.

Các kiểu giá trị khác

• Từ khóa: auto, none, inherit, transparent, currentColor (màu chữ hiện tại).
• Thời gian: s, ms; góc: deg, turn.
• Viết tắt (shorthand): margin: 10px 20px (trên-dưới, trái-phải); margin: 1px 2px 3px 4px (theo chiều kim đồng hồ: trên, phải, dưới, trái).
• Số 0 không cần đơn vị: margin: 0.