Công cụ chuyển đổi REM sang PX là gì?
Công cụ chuyển đổi REM sang PX giúp bạn quy đổi đơn vị relative em (REM) thành pixel (PX). Trong lập trình web, REM là một đơn vị tương đối, phụ thuộc vào cỡ chữ của phần tử gốc (thường là phần tử <html>), trong khi PX là đơn vị tuyệt đối. Nhờ công cụ này, lập trình viên vừa có thể giữ cho giao diện linh hoạt và dễ tiếp cận, vừa biết chính xác mỗi giá trị REM tương ứng với bao nhiêu pixel.
Khi nào nên dùng công cụ chuyển đổi REM sang PX?
Công cụ này đặc biệt hữu ích trong những trường hợp sau:
- Khi thiết kế website responsive và bạn cần chuyển qua lại giữa đơn vị tương đối và tuyệt đối
- Khi làm việc với design system sử dụng đơn vị REM nhưng bạn muốn biết giá trị pixel để tham chiếu
- Khi triển khai giao diện từ bản thiết kế mockup ghi kích thước theo pixel, nhưng bạn lại quen viết code bằng đơn vị REM
Cách tính REM sang PX
Việc chuyển đổi từ REM sang PX dựa trên một công thức rất đơn giản:
PX = REM × Cỡ chữ gốc
Trong đó:
- PX là giá trị pixel thu được
- REM là giá trị relative em cần chuyển đổi
- Cỡ chữ gốc là cỡ chữ nền của phần tử html (thường mặc định là 16px trên hầu hết các trình duyệt)
Như vậy, giá trị REM luôn phụ thuộc vào cỡ chữ gốc. Điều đó có nghĩa là nếu bạn đặt cỡ chữ 16px cho phần tử <html> trong file CSS như sau:
Thì khi đó 1rem = 16px.
Ví dụ minh họa
Chuyển đổi REM sang PX cơ bản
Chuyển 1.5rem sang pixel với cỡ chữ gốc mặc định là 16px.
| Giá trị REM | Cỡ chữ gốc | Phép tính | Kết quả |
|---|---|---|---|
| 1.5rem | 16px | 1.5 × 16 | 24px |
Chuyển đổi nhiều giá trị REM
Chuyển 0.75rem, 2rem và 3.5rem sang pixel với cỡ chữ gốc là 16px.
| Giá trị REM | Cỡ chữ gốc | Phép tính | Kết quả |
|---|---|---|---|
| 0.75rem | 16px | 0.75 × 16 | 12px |
| 2rem | 16px | 2 × 16 | 32px |
| 3.5rem | 16px | 3.5 × 16 | 56px |
Cỡ chữ gốc tùy chỉnh
Chuyển 2.5rem sang pixel với cỡ chữ gốc tùy chỉnh là 20px.
| Giá trị REM | Cỡ chữ gốc | Phép tính | Kết quả |
|---|---|---|---|
| 2.5rem | 20px | 2.5 × 20 | 50px |
Bảng quy đổi REM sang PX thường gặp
Dưới đây là bảng tham chiếu cho các giá trị REM phổ biến được quy đổi sang pixel (dựa trên cỡ chữ gốc mặc định 16px):
| Giá trị REM | Giá trị Pixel |
|---|---|
| 0.25 rem | 4 px |
| 0.5 rem | 8 px |
| 0.75 rem | 12 px |
| 0.875 rem | 14 px |
| 1 rem | 16 px |
| 1.125 rem | 18 px |
| 1.25 rem | 20 px |
| 1.5 rem | 24 px |
| 1.875 rem | 30 px |
| 2 rem | 32 px |
| 2.25 rem | 36 px |
| 2.5 rem | 40 px |
| 3 rem | 48 px |
| 4 rem | 64 px |
| 5 rem | 80 px |
Công cụ liên quan
Khám phá thêm các công cụ hỗ trợ lập trình và thiết kế web qua những máy tính liên quan dưới đây:
