💡 Tôi đã chuẩn bị sẵn trình soạn thảo bên dưới bài viết. Bạn có thể thử nghiệm thoải mái!
Cập nhật: 31 tháng 5 năm 2026
Cỡ chữ (Font Size) | Cỡ chữ | font-size rem
📌
Kết luận
Nên sử dụng đơn vị rem để chỉ định cỡ chữ
📝 Mã thực tế tại đây
p { font-size: 1.2rem; }Tại sao rem lại được khuyên dùng?
rem là đơn vị tương đối dựa trên cỡ chữ của phần tử gốc (thẻ html). Khi người dùng thay đổi cài đặt cỡ chữ trong trình duyệt, các phần tử sử dụng rem sẽ thay đổi tương ứng.
| Đơn vị | Cơ sở | Ưu điểm | Nhược điểm |
|---|---|---|---|
px | Giá trị cố định | Chính xác | Bỏ qua cài đặt của người dùng |
rem | Phần tử html | Thân thiện với khả năng truy cập | Cần thời gian để làm quen |
em | Phần tử cha | Linh hoạt | Cách tính phức tạp khi lồng nhau |
rem là đơn vị được khuyên dùng nhất. 1rem thông thường là 16px, vì vậy 1.2rem sẽ tương đương khoảng 19.2px.
Tổng kết
- Sử dụngrem cho cỡ chữ là một "best practice"
- 1rem = cỡ chữ của phần tử gốc (mặc định thường là 16px)
- Giúp thiết kế web thân thiện hơn với mọi đối tượng người dùng
Hãy thử trong phần bài tập
Hãy thử đổi cỡ chữ của thẻ p thành 1.2rem nhé.🧪 Thử nghiệm tại đây
Bạn có thể viết mã thực tế vào trình soạn thảo bên dưới và xem ngay kết quả. Đừng sợ làm hỏng, bạn có thể thử lại bao nhiêu lần tùy thích.
■ Bài tập thực hành
Hãy đổi cỡ chữ của thẻ p thành 1.2rem.
Gợi ý khi gặp khó khăn
Sử dụng thuộc tính font-size.