[CSS] Tìm hiểu về đơn vị px, pt, percentages, em và rem

Trong CSS, việc sử dụng các đơn vị đo lường chính xác là vô cùng quan trọng để tạo bố cục trang web và thiết kế giao diện người dùng hiệu quả. Bài viết này sẽ giới thiệu chi tiết về 5 đơn vị phổ biến được sử dụng trong CSS: px, pt, percentages, em và rem.

1. Đơn vị px (pixel)

• Định nghĩa: Pixel là đơn vị tuyệt đối, tương ứng với một điểm ảnh trên màn hình hiển thị.
• Ưu điểm:
  • Cung cấp độ chính xác cao trong việc thiết kế giao diện.
  • Đảm bảo bố cục trang web hiển thị đồng nhất trên các thiết bị có cùng độ phân giải màn hình.
• Nhược điểm:
  • Khó khăn trong việc điều chỉnh kích thước bố cục cho phù hợp với các thiết bị có độ phân giải màn hình khác nhau.
  • Gây ra vấn đề về khả năng tiếp cận cho người dùng có vấn đề về thị lực.

Ví dụ:

.element {
  width: 100px; /* Chiều rộng 100 điểm ảnh */
  height: 50px; /* Chiều cao 50 điểm ảnh */
}

2. Đơn vị pt (point)

• Định nghĩa: Point là đơn vị tương đối, dựa trên kích thước phông chữ mặc định của trình duyệt. 1pt tương đương với 1/72 inch.
• Ưu điểm:
  • Đảm bảo tính tương thích với các thiết bị có độ phân giải màn hình khác nhau.
• Nhược điểm:
  • Khó khăn trong việc kiểm soát kích thước chính xác của các yếu tố.
  • Ít được sử dụng trong thực tế.

Ví dụ:

.element {
  font-size: 12pt; /* Kích thước phông chữ 12 điểm */
}

3. Đơn vị percentages (%)

• Định nghĩa: Percentage là đơn vị tương đối, thể hiện tỷ lệ phần trăm so với một giá trị tham chiếu.
• Ưu điểm:
  • Dễ dàng điều chỉnh kích thước bố cục cho phù hợp với các thiết bị có độ phân giải màn hình khác nhau.
  • Đảm bảo tính tương thích và khả năng tiếp cận.
• Nhược điểm:
  • Khó khăn trong việc thiết kế bố cục với kích thước chính xác.

Ví dụ:

.element {
  width: 50%; /* Chiều rộng 50% so với container cha */
  height: 25%; /* Chiều cao 25% so với container cha */
}

4. Đơn vị em

• Định nghĩa: Em là đơn vị tương đối, dựa trên kích thước phông chữ của phần tử cha. 1em tương đương với 100% kích thước phông chữ của phần tử cha.
• Ưu điểm:
  • Giúp tạo bố cục linh hoạt, tự động điều chỉnh theo kích thước phông chữ.
  • Đảm bảo tính tương thích và khả năng tiếp cận.
• Nhược điểm:
  • Khó khăn trong việc kiểm soát kích thước chính xác của các yếu tố.

Ví dụ:

.element {
  font-size: 16px;
  padding: 1em; /* Khoảng đệm 1em, tương đương với 16px */
}

5. Đơn vị rem

• Định nghĩa: Rem là đơn vị tương đối, dựa trên kích thước phông chữ của phần tử gốc (html). 1rem tương đương với 100% kích thước phông chữ của phần tử gốc.
• Ưu điểm:
  • Giúp tạo bố cục linh hoạt, tự động điều chỉnh theo kích thước phông chữ của phần tử gốc.
  • Đảm bảo tính tương thích và khả năng tiếp cận.
  • Khắc phục nhược điểm của em khi tính toán dựa trên kích thước phông chữ của phần tử cha.
• Nhược điểm:
  • Ít được hỗ trợ bởi các trình duyệt cũ.

Ví dụ:

html {
  font-size: 16px;
}

.element {
  padding: 1rem; /* Khoảng đệm 1rem, tương đương với 16px */
}