Hướng dẫn cách dùng rem css và em css

23/01/2025

Ví dụ Hướng dẫn cách dùng rem css và em css

REM CSS là gì?

Trong CSS, rem (viết tắt của “root em”) là một đơn vị đo lường tương đối dựa trên kích thước phông chữ của phần tử gốc (root element) trong trang web.

Đặc điểm của `rem`:

Tương đối với phần tử gốc (<html>):
- Kích thước của 1 rem tương ứng với giá trị font-size được thiết lập cho phần tử <html>.
- Nếu không được tùy chỉnh, trình duyệt thường thiết lập font-size mặc định cho <html> là 16px.
Dễ dàng kiểm soát kích thước đồng bộ:
- Sử dụng rem giúp bạn thiết kế giao diện với kích thước tỷ lệ thống nhất (scalable design).
- Khi thay đổi kích thước của <html>, tất cả các phần tử dùng rem sẽ tự động thay đổi kích thước tương ứng.
Khác biệt với em:
- em: Kích thước dựa trên font-size của phần tử mẹ trực tiếp.
- rem: Luôn dựa trên font-size của <html> (phần tử gốc).

Cách tính kích thước `rem`:

Giả sử bạn thiết lập:

css

html { font-size: 16px; /* Mặc định */ }

1 rem là bao nhiêu px?

1 rem = 16px
0.5 rem = 8px
2 rem = 32px

Nếu bạn thay đổi kích thước font-size của <html>:

css

html { font-size: 20px; /* Tăng kích thước */ }

1 rem = 20px
0.5 rem = 10px
2 rem = 40px

Ví dụ:

Thiết kế kích thước linh hoạt:

css

html { font-size: 16px; } h1 { font-size: 2rem; /* 2 * 16px = 32px */ } p { font-size: 1rem; /* 1 * 16px = 16px */ } small { font-size: 0.75rem; /* 0.75 * 16px = 12px */ }

Điều chỉnh toàn bộ giao diện:

Nếu bạn muốn phóng to giao diện cho màn hình lớn hơn:

css

@media (min-width: 768px) { html { font-size: 18px; } }

Các phần tử sẽ tự động thay đổi kích thước mà không cần chỉnh lại từng thành phần.

Ưu điểm của `rem`:

Tính linh hoạt: Dễ dàng thay đổi kích thước toàn trang chỉ bằng cách sửa font-size của <html>.
Thân thiện với người dùng: Phù hợp với việc thiết kế responsive và cải thiện khả năng truy cập (accessibility).
Quản lý dễ dàng: Kích thước không bị phụ thuộc vào cây DOM (không bị ảnh hưởng bởi các phần tử mẹ).

Nhược điểm:

Nếu không quen, bạn có thể khó tính toán kích thước ngay từ đầu vì phải hiểu rõ quan hệ giữa các đơn vị.

Kết luận:

Sử dụng rem trong CSS giúp bạn xây dựng giao diện dễ kiểm soát, thân thiện với thiết kế responsive và tương thích với các thiết bị khác nhau. Nó là một lựa chọn tốt hơn trong nhiều trường hợp so với px hoặc em.

Em trong CSS là gì?

Trong CSS, em là một đơn vị đo lường tương đối, được tính dựa trên kích thước phông chữ (font-size) của phần tử cha trực tiếp hoặc chính nó (nếu phần tử không có cha trực tiếp định rõ kích thước).

Đặc điểm của `em`:

Tương đối với font-size của phần tử cha:
- Giá trị của 1em dựa trên font-size của phần tử cha trực tiếp.
- Nếu phần tử không có cha trực tiếp định nghĩa font-size, nó sẽ kế thừa từ phần tử tổ tiên hoặc phần tử gốc (<html>).
Tính lũy thừa (nested scaling):
- Khi sử dụng em trong các phần tử lồng nhau, kích thước được tính toán dựa trên giá trị đã được áp dụng từ phần tử cha. Điều này có thể dẫn đến các trường hợp tăng kích thước không mong muốn.
Thường dùng để thiết kế động:
- Dùng cho các thuộc tính như padding, margin, hoặc width để thiết kế linh hoạt.

Cách tính `em`:

Giả sử bạn thiết lập:

css

html { font-size: 16px; }

Ví dụ cơ bản:

css

p { font-size: 1em; /* 1 * 16px = 16px */ } h1 { font-size: 2em; /* 2 * 16px = 32px */ } small { font-size: 0.75em; /* 0.75 * 16px = 12px */ }

Ví dụ lồng nhau:

css

html { font-size: 16px; } div { font-size: 1.5em; /* 1.5 * 16px = 24px */ } span { font-size: 1em; /* 1 * 24px (kế thừa từ div) = 24px */ }

Nếu span nằm trong div, kích thước của span sẽ là 1em dựa trên giá trị của div, chứ không phải của html.

1 em bằng bao nhiêu px?

Nghĩa là: 1em = 1rem = 100% = 16px

So sánh `em` và `rem`:

Đặc điểm	`em`	`rem`
Tương đối với	Phần tử cha trực tiếp	Phần tử gốc (`<html>`)
Tính lũy thừa	Có thể gây hiệu ứng lồng	Không bị ảnh hưởng bởi phần tử khác
Ứng dụng	Thích hợp cho kích thước cục bộ	Tốt hơn cho kích thước toàn trang

Ưu điểm của `em`:

Linh hoạt: Dựa trên phần tử cha, phù hợp cho các thiết kế cục bộ.
Ứng dụng đa dạng: Không chỉ dùng cho font-size, mà còn có thể sử dụng cho các thuộc tính như padding, margin, line-height, v.v.

Nhược điểm của `em`:

Tính lũy thừa khó kiểm soát: Khi nhiều phần tử lồng nhau, em có thể dẫn đến kích thước lớn không mong muốn.
Khó duy trì: Trong các dự án phức tạp, việc tính toán kích thước khi sử dụng em trở nên phức tạp hơn.