Công cụ Chuyển Đổi PX Sang REM Miễn Phí
Chuyển đổi pixel sang rem và ngược lại, với cỡ phông cơ sở có thể cấu hình.
Bảng tham khảo
| PX | REM |
|---|
Cách hoạt động
REM nghĩa là « root em » và tương đối với cỡ phông của phần tử gốc. Theo mặc định, các trình duyệt sử dụng 16 px. Công thức đơn giản: rem = px ÷ cơ sở và px = rem × cơ sở. Sửa đổi cỡ cơ sở ở trên nếu dự án của bạn sử dụng gốc khác.
Câu hỏi thường gặp
Tại sao sử dụng rem thay vì px?
Đơn vị REM thích ứng với thiết lập cỡ phông của người dùng trong trình duyệt của họ, cải thiện khả năng tiếp cận. Nếu người dùng tăng cỡ phông mặc định, các bố cục dựa trên rem điều chỉnh tự động, không như giá trị pixel cố định.
Sự khác biệt giữa em và rem là gì?
EM tương đối với cỡ phông của phần tử cha và có thể cộng dồn trong các phần tử lồng nhau. REM luôn tương đối với cỡ phông của phần tử gốc (<html>), làm cho nó dễ dự đoán hơn.
Nên dùng cơ sở nào?
Hầu hết các dự án sử dụng giá trị mặc định của trình duyệt là 16 px. Một số nhà phát triển định nghĩa html { font-size: 62.5%; } (10 px) cho các phép tính đơn giản hơn. Sử dụng cỡ phông gốc được định nghĩa cho dự án của bạn.
rem thực sự là gì
«Rem» là viết tắt của root em. Đặc tả W3C CSS Values Level 3 định nghĩa nó là «equal to the computed value of font-size on the root element», tức là trên phần tử <html>. Các trình duyệt mặc định <html> là 16px trừ khi được ghi đè, vì vậy trên một trang vanilla 1rem = 16px, 0.5rem = 8px, 1.5rem = 24px, 2rem = 32px.
Nếu một stylesheet khai báo html { font-size: 20px }, thì 1rem = 20px cho phần còn lại của tài liệu. Nếu người dùng đã tăng mặc định trình duyệt lên 24px (một điều chỉnh phổ biến cho người nhìn kém), 1rem = 24px dù không có ghi đè stylesheet nào, và đó là toàn bộ lập luận về accessibility cho rem trong một câu.
Tại sao rem quan trọng: lập luận về accessibility
Các trình duyệt cung cấp hai cơ chế thu phóng khác nhau cho người dùng, và chúng hoạt động khác nhau đối với các đơn vị:
- Thu phóng trình duyệt (Cmd/Ctrl + hoặc kéo giãn), thu phóng đồng đều toàn bộ viewport. Một phần tử 16px ở mức thu phóng 200% chiếm cùng không gian màn hình với phần tử 32px ở mức 100%. Cả
pxlẫnremđều thu phóng giống nhau dưới zoom, vì vậy bản thân zoom không biện hộ cho rem. - Tùy chọn kích thước font mặc định của trình duyệt: ẩn trong cài đặt trình duyệt (Firefox
about:preferences, Customize fonts của Chrome). Khi người dùng thay đổi «Kích thước font mặc định» từ 16 lên 24 (rất phổ biến với người dùng nhìn kém), phần tử<html>bắt đầu tính toán ở 24px. Mỗi giá trịremtự động mở rộng theo hệ số 1,5×; mỗi giá trịpxcố định vẫn giữ nguyên.
Đây là lý do tại sao layout được xây dựng bằng rem tôn trọng tùy chọn accessibility của người dùng còn layout xây dựng bằng px thì không. WCAG 2.2 Tiêu chí thành công 1.4.4 (Resize Text, Cấp AA) yêu cầu văn bản có thể được phóng to lên ít nhất 200% mà không mất nội dung hoặc chức năng. Chỉ riêng zoom trình duyệt đáp ứng yêu cầu này về mặt kỹ thuật, nhưng layout dựa trên rem đáp ứng sạch hơn vì chúng tôn trọng cơ chế kích thước font mặc định chi tiết hơn, đó là điều người dùng nhìn kém thực sự điều chỉnh hàng ngày.
Gotcha cộng dồn của em: lý do thúc đẩy dùng rem
Trước khi có rem, cách duy nhất để có typography có thể thu phóng trong CSS là em, vốn tương đối so với font-size của phần tử cha, không phải root. Vấn đề cổ điển: các phần tử lồng nhau với font-size dựa trên em bị cộng dồn.
.list { font-size: 1.2em; }
.list .list { font-size: 1.2em; } /* renders at 1.44× the grandparent */
.list .list .list { font-size: 1.2em; } /* now 1.728× */Ba danh sách lồng nhau phình to lên gần gấp đôi kích thước body, điều này hầu như không bao giờ có chủ ý. rem giải quyết điều này bằng cách neo vào root mỗi lần, ba phần tử lồng nhau ở 1.2rem đều là 19,2px bất kể độ sâu lồng nhau. Đây là lý do tại sao hầu hết stylesheet hiện đại dùng rem cho font-size và dành em cho các tỉ lệ nội bộ component (kích thước icon nên khớp với chữ button, padding bên trong button mở rộng theo nhãn của nó).
Thủ thuật 62,5%, toán học tiện lợi, accessibility còn tranh cãi
Một pattern được Jonathan Snook phổ biến trong bài viết tháng 5 năm 2011 của ông: đặt html { font-size: 62.5% }. Vì 62,5% × 16 = 10, điều này mặc định tạo ra 1rem = 10px, toán nhẩm tiện lợi. 1.6rem = 16px, 2.4rem = 24px, 4.8rem = 48px. Các nhà thiết kế thích nó vì nó loại bỏ phép tính «chia cho 16» khó chịu ra khỏi mọi giá trị.
Phê bình về accessibility (được nêu ra vào thời điểm đó và được củng cố trong các bài viết sau): việc đặt root font-size thành 62,5% thực chất thu nhỏ bất cứ thứ gì người dùng đã chọn trong tùy chọn trình duyệt. Một người dùng đặt mặc định của họ thành 24px vì nhìn kém sẽ thấy văn bản body ở 15px, phá vỡ toàn bộ điểm của việc dùng rem. Phản biện hiện đại là đặt root thành 62,5% nhưng khai báo rõ ràng body font-size tại 1.6rem (trở lại 16px) để ghi đè của người dùng vẫn cascade đúng cách. Nhiều nhóm bỏ qua thủ thuật hoàn toàn và chấp nhận toán học kém thanh lịch hơn một chút.
Khi nào dùng rem, khi nào dùng px, cách nhìn của Comeau
Bài viết «px or rem?» của Josh W. Comeau (tháng 5 năm 2022, cập nhật tháng 5 năm 2025) cung cấp heuristic một câu hỏi duy nhất hữu ích nhất cho quyết định này. Hỏi: «Giá trị này có nên mở rộng theo khi người dùng tăng kích thước font mặc định của trình duyệt không?» Nếu có, dùng rem. Nếu không, dùng px.
Theo tiêu chí đó:
- Dùng rem cho: font-size, margin/padding dọc (gắn với nhịp typography), chiều rộng button và các container có hình dạng theo nội dung, max-width chiều dài dòng, breakpoint (để layout chuyển đổi ở kích thước thu phóng phù hợp với người dùng nhìn kém).
- Dùng px cho: border (đường kẻ 1px nên giữ nguyên là đường kẻ), padding/decoration ngang, bán kính bóng đổ, kích thước ảnh khi ảnh có chủ đích pixel cố định, kích thước icon chi tiết.
Bài kiểm tra một câu hỏi tạo ra câu trả lời nhất quán trên hàng nghìn quyết định trong codebase, đó là chiến thắng thực sự, các stylesheet kết quả hoạt động theo cách người dùng kỳ vọng dưới cả zoom lẫn tùy chỉnh font-size.
Tailwind CSS 4 dùng rem ở khắp nơi
Tailwind CSS v4.0 (tháng 1 năm 2025) tích hợp tỉ lệ mặc định hoàn toàn dựa trên rem. Mọi typography token (text-xs 0,75rem đến text-9xl 8rem) và mọi spacing token (p-1 0,25rem, p-4 1rem, m-8 2rem) đều ở dạng rem ngay từ đầu. Tailwind 4 cố tình để root <html> ở mức mặc định 16px của trình duyệt (họ rõ ràng không áp dụng thủ thuật 62,5%) để tùy chọn accessibility của người dùng cascade sạch sẽ. Hàng chục triệu dự án hiện nay tích hợp các design system dựa trên rem mặc định, đây là lập luận mạnh mẽ nhất rằng hệ sinh thái đã hội tụ.
Bảng chuyển đổi ở root 16px mặc định
| Pixel | Rem | Dùng thường gặp |
|---|---|---|
| 8 px | 0,5 rem | Nửa đơn vị cơ sở, khoảng cách nhỏ |
| 12 px | 0,75 rem | Chú thích / chữ nhỏ |
| 14 px | 0,875 rem | Văn bản phụ |
| 16 px | 1 rem | Văn bản body mặc định |
| 18 px | 1,125 rem | Thân hơi nhấn mạnh |
| 20 px | 1,25 rem | Đoạn dẫn |
| 24 px | 1,5 rem | Tiêu đề H4; văn bản UI lớn |
| 32 px | 2 rem | Tiêu đề H3 |
| 48 px | 3 rem | Tiêu đề H2 / hero |
| 64 px | 4 rem | Tiêu đề H1 / display |
Vị trí của rem trong bộ công cụ hiện đại
Rem là mặc định phù hợp cho typography và khoảng cách neo vào typography, nhưng nó không phải câu trả lời cho mọi vấn đề layout. Bộ công cụ hiện đại còn bao gồm:
- clamp() cho typography linh hoạt,
font-size: clamp(1rem, 0.8rem + 1vw, 1.5rem)đặt sàn và trần rem với phần giữa được điều khiển bởi viewport. Bộ chuyển đổi đơn vị CSS - Viewport unit (
vw,vh, và các unit mới hơnsvh/lvh/dvhcho di động), cho các phần hero và phần tử full-bleed nên mở rộng theo viewport thay vì theo typography. - Container query unit (
cqw,cqh), cho thiết kế theo component khi cùng một component có thể xuất hiện ở các chiều rộng khác nhau.
Cho mọi thứ khác (văn bản body, tiêu đề, padding, chiều rộng button, breakpoint) rem là con đường ít cản trở nhất và mặc định có accessibility tốt nhất.
Câu hỏi thêm
Dự án của tôi dùng kích thước font cơ sở không mặc định thì sao?
Thay đổi trường Base font size ở trên thành bất kỳ thứ gì html { font-size: … } của dự án bạn phân giải ra. Phép tính chuyển đổi vẫn là rem = px ÷ base bất kể base. Nếu codebase của bạn dùng 18px, 32px trở thành 1.78rem; ở 10px (thủ thuật 62,5%) nó trở thành 3.2rem. Lưu ý rằng việc ghi đè root font-size có ảnh hưởng đến accessibility đối với người dùng tùy chỉnh mặc định trình duyệt của họ, xem phần thảo luận về thủ thuật 62,5% ở trên.
Tại sao 0,625rem không kết xuất chính xác thành 10px?
Nó có, về mặt toán học, ở root 16px mặc định, 0.625 × 16 = 10. Nhưng các trình duyệt kết xuất theo độ chính xác subpixel và có thể làm tròn giá trị cuối thành các pixel thiết bị nguyên, vì vậy một border 0.625rem đôi khi có thể xuất hiện hơi khác so với border 10px được mã hóa cứng tùy thuộc vào DPR màn hình. Đối với đường kẻ 1 pixel pixel-perfect, dùng 1px trực tiếp; cho mọi thứ khác, giá trị dựa trên rem là ổn.
Tôi có thể kết hợp rem và px trong cùng một stylesheet không?
Có, và bạn nên. Dùng rem cho những thứ nên mở rộng theo tùy chọn font-size của người dùng (typography, vertical rhythm, breakpoint) và px cho những thứ không nên (border, chi tiết icon, bóng đổ trang trí). Câu hỏi «có nên mở rộng không?» của Comeau là bộ lọc thực tế; câu trả lời ánh xạ gọn gàng vào một trong hai đơn vị hầu như mỗi lần.
Các công cụ build có chuyển đổi px sang rem tự động không?
Có, các plugin PostCSS như postcss-pxtorem và postcss-rem-to-responsive-pixel có thể viết lại giá trị px trong CSS bạn viết thành rem trong bước build, với ngưỡng có thể cấu hình (ví dụ: «chuyển đổi mọi thứ ≥ 12px»). Chúng hữu ích khi di chuyển codebase nặng px hiện có. Bộ chuyển đổi trực tiếp như trang này vẫn hữu ích cho các trường hợp đơn lẻ, tra cứu design spec và học toán bằng tay.
Có dữ liệu nào được gửi lên máy chủ không?
Không. Phép chuyển đổi là một phép chia, JavaScript thuần tính toán cục bộ trong trình duyệt của bạn. Không có gì về đầu vào của bạn rời khỏi trang; công cụ hoạt động ngoại tuyến sau khi đã tải.