Đổi PX REM
Chuyển đổi giá trị giữa px và rem dựa trên cỡ chữ gốc tùy chỉnh. Rất hữu ích khi chuyển thông số thiết kế sang CSS hoặc xây dựng bố cục responsive, dễ tiếp cận và co giãn theo thiết lập cỡ chữ của người dùng.
Các bước sử dụng
- Đặt trường Cỡ chữ gốc (px) theo giá trị nền của bạn — mặc định là 16, đúng bằng mặc định của trình duyệt.
- Nhập một giá trị vào ô PX để nhận REM tương ứng, hoặc nhập vào ô REM để nhận PX tương ứng — hai ô tự cập nhật cho nhau ngay lập tức.
- Đọc dòng kết quả bên dưới các ô nhập (ví dụ
16px = 1rem) và bấm vào đó để sao chép giá trị rem vào clipboard. - Kéo xuống Bảng tham chiếu để xem nhanh các cỡ thông dụng (8, 10, 12, 14 … 64 px) được quy đổi theo cỡ gốc hiện tại.
- Bấm biểu tượng sao chép ở mỗi dòng trong bảng để copy giá trị rem đó.
Mẹo
- Khi đổi cỡ chữ gốc, giá trị rem được tính lại trong khi giá trị px giữ nguyên, nên bạn có thể so sánh cùng một px ở nhiều cỡ gốc khác nhau.
- Bảng tham chiếu tính lại theo bất kỳ cỡ gốc nào bạn nhập, không chỉ 16 — tiện khi dự án dùng cỡ gốc 10px cho dễ tính.
- Mọi thao tác chạy ngay trong trình duyệt nên việc chuyển đổi tức thì và không có dữ liệu nào được gửi lên máy chủ.
Câu hỏi thường gặp
Nên dùng cỡ chữ gốc bao nhiêu?
16px là mặc định của trình duyệt và là lựa chọn an toàn nhất cho khả năng tiếp cận. Một số nhóm đặt cỡ gốc là 10px để 1rem = 10px cho dễ nhẩm — hãy nhập đúng giá trị html { font-size } trong CSS của bạn.
Tại sao giá trị được sao chép lại bỏ các số 0 ở cuối?
Công cụ tự cắt các số 0 không cần thiết để bạn nhận kết quả gọn như 1.5rem thay vì 1.5000rem, giúp CSS sạch sẽ hơn.
Tôi có thể đổi ngược từ rem sang px không?
Có. Chỉ cần nhập vào ô REM, ô PX sẽ tự cập nhật — việc chuyển đổi hoạt động theo cả hai chiều.