Bài 24: Đơn vị CSS – px, %, em, rem, vw, vh

Trong CSS, mọi thứ đều có kích thước: font chữ, chiều rộng, khoảng cách, khung, v.v.

Để kiểm soát chúng chính xác và linh hoạt, bạn cần hiểu rõ đơn vị đo – và chọn đúng đơn vị sẽ giúp giao diện:

• Dễ co giãn, responsive tốt
• Giữ tỷ lệ chuẩn, không bị “vỡ layout”
• Tối ưu cho nhiều loại thiết bị, độ phân giải

---

1. Các loại đơn vị trong CSS

Chia làm 2 nhóm:

Nhóm	Ví dụ
Đơn vị tuyệt đối	px, pt, cm
Đơn vị tương đối	%, em, rem, vw, vh

---

2. px – đơn vị cố định (pixel)

📋 Copyh1 {
  font-size: 24px;
}

• 1 pixel = 1 điểm ảnh (tùy thiết bị)
• Không thay đổi theo kích thước màn hình
• Dễ dùng, nhưng thiếu linh hoạt khi responsive

---

3. % – phần trăm của phần tử cha

📋 Copy.container {
  width: 80%;
}

• Phụ thuộc vào kích thước phần tử chứa nó
• Thường dùng để làm layout co giãn
• Cũng có thể dùng cho padding, margin, height…

---

4. em – theo kích thước font của phần tử cha

📋 Copyp {
  font-size: 1.2em; /* = 1.2 * font-size của cha */
}

• 1em = 100% cỡ chữ của cha
• Nếu cha là 16px, thì 1.5em = 24px
• Dùng cho font-size, padding, margin…

Lưu ý: Có thể bị “nhân lũy tiến” nếu lồng nhiều lớp.

---

5. rem – theo kích thước font của html (gốc)

📋 Copyhtml {
  font-size: 16px;
}

h2 {
  font-size: 2rem; /* = 32px */
}

• rem = root em (font-size của thẻ html)
• Ổn định hơn em, ít bị ảnh hưởng bởi cha
• Rất phổ biến trong thiết kế hiện đại

---

6. vw, vh – theo kích thước khung nhìn

Đơn vị	Ý nghĩa
1vw	1% chiều rộng của màn hình
1vh	1% chiều cao của màn hình

Ví dụ:

📋 Copy.hero {
  height: 100vh; /* Chiếm toàn màn hình */
  width: 100vw;
}

Rất hữu ích cho layout toàn trang, hero banner, v.v.

---

7. clamp – kết hợp nhiều đơn vị

📋 Copyh1 {
  font-size: clamp(18px, 5vw, 32px);
}

• Kích thước co giãn theo khung nhìn (vw)
• Nhưng giới hạn min – max để không quá to hay quá nhỏ
• Rất mạnh cho responsive typography

---

8. So sánh nhanh

Đơn vị	Ưu điểm	Nhược điểm
px	Dễ kiểm soát, chính xác	Không responsive
%	Co giãn theo cha	Phức tạp nếu cha không cố định
em	Linh hoạt, phù hợp cho padding	Dễ gây lồng hiệu ứng không mong
rem	Ổn định, dễ predict	Phải thiết lập html {font-size}
vw/vh	Tốt cho layout toàn trang	Phức tạp khi dùng với header/footer

---

Gợi ý sử dụng đơn vị

Trường hợp	Đơn vị nên dùng
Font chữ toàn trang	rem, clamp
Khoảng cách trong phần tử	em, rem
Layout co giãn theo màn hình	%, vw, vh
Header toàn màn hình	100vh
Padding/margin theo tỷ lệ chữ	em