Chuyển REM Sang PX - Công Cụ Đổi Đơn Vị CSS

Công Cụ Chuyển REM Sang PX

Công cụ này chuyển giá trị rem trở lại thành pixel. Đây là chiều ngược của phép chuyển px sang rem và rất hữu ích để kiểm tra các thiết kế dựa trên rem: nhập một giá trị rem, đặt cỡ chữ gốc, và lập tức thấy nó hiển thị ra đúng bao nhiêu pixel. Nhờ đó dễ dàng kiểm tra khoảng cách, soát kích thước tính được và bàn giao thông số chính xác.

Với cỡ gốc chuẩn 16px, 1rem = 16px. Nếu dự án của bạn dùng cỡ chữ html khác, hãy đặt cỡ gốc tương ứng để có kết quả pixel chính xác.

Khi Nào Bạn Cần PX Từ REM

Soát Kích Thước Tính Được

Quy đổi một giá trị rem trong file CSS của người khác ra pixel để hiểu nó thực sự hiển thị ở cỡ nào.

Bàn Giao Chuẩn Pixel

Cung cấp cho nhà thiết kế và QA số đo pixel chính xác được suy ra từ hệ thống dựa trên rem của bạn.

Khớp Với Tài Nguyên Thiết Kế

Xác nhận một giá trị rem khớp với các tài nguyên pixel cố định như icon, ảnh hay viền 1px.

Cách Chuyển REM Sang PX

1

Đặt Cỡ Chữ Gốc

Nhập cỡ chữ gốc (html) của dự án vào ô Cỡ Chữ Gốc. Mặc định 16px khớp với mốc tiêu chuẩn của trình duyệt.

2

Nhập Giá Trị REM

Chọn tab đơn vị rem và gõ giá trị rem cần chuyển. Giá trị pixel tương đương cập nhật trực tiếp.

3

Đọc Kết Quả

Giá trị pixel hiện ra tức thì ở bảng kết quả, cùng giá trị em và rem tương đương. Chỉnh số chữ số thập phân theo độ chính xác bạn muốn.

4

Sao Chép Kết Quả

Nhấn nút sao chép cạnh kết quả px và dán vào bất cứ nơi nào bạn cần số đo pixel chính xác.

Công thức: px = rem × cỡ chữ gốc. Ví dụ, 1.5rem × 16px = 24px.

Mối Liên Hệ Giữa REM và PX

Pixel là tuyệt đối còn rem là tương đối, nên hai đơn vị trả lời những câu hỏi khác nhau. Hiểu rõ sự đánh đổi giúp bạn quyết định nên khai báo cái nào trong CSS và quy đổi cái nào để tham khảo.

REM

Tương đối và co giãn

Gắn với cỡ chữ gốc
Co giãn theo tùy chọn font của người dùng
Nên dùng cho bố cục và kiểu chữ
Một giá trị, nhất quán ở mọi nơi

PX

Tuyệt đối và cố định

Một pixel thiết bị, không tương đối
Bỏ qua tùy chọn font của người dùng
Hợp với viền và đường mảnh
Số đo chính xác, dự đoán được

Mẹo: chuyển rem sang px chỉ để kiểm tra và bàn giao. Trong CSS sản phẩm, giữ giá trị ở dạng rem sẽ bảo toàn khả năng tiếp cận và co giãn responsive.

Quy Đổi REM Sang PX Thông Dụng

Giá trị tham khảo với cỡ chữ gốc 16px. Đổi cỡ gốc trong công cụ để tính lại cho mọi thiết lập gốc khác.

REM	Pixel (gốc 16px)	Dùng cho
0.5rem	`8px`	Khoảng hở hẹp, đệm nhỏ
0.75rem	`12px`	Chú thích, chữ nhỏ
1rem	`16px`	Cỡ chữ thân bài
1.5rem	`24px`	Tiêu đề mục, khoảng cách
2rem	`32px`	Tiêu đề trang, khoảng hở lớn
3rem	`48px`	Khoảng cách hero, lề rộng

Câu Hỏi Thường Gặp

rem được chuyển sang px như thế nào?

Nhân giá trị rem với cỡ chữ gốc: px = rem × gốc. Với cỡ gốc 16px, 1.5rem thành 24px. Công cụ làm tức thì và làm tròn theo số chữ số thập phân bạn chọn.

Vì sao tôi cần chuyển rem trở lại px?

Chủ yếu để kiểm tra và trao đổi: xem một thiết kế dựa trên rem cho ra cỡ bao nhiêu, khớp với tài nguyên pixel cố định, hoặc bàn giao số đo chính xác cho nhà thiết kế và QA. Thông thường CSS thực tế vẫn giữ ở rem để dễ co giãn.

Nếu cỡ chữ gốc của dự án không phải 16px thì sao?

Chỉ cần đổi ô Cỡ Chữ Gốc thành giá trị gốc thực tế của bạn. Ví dụ, với cỡ gốc 10px (kỹ thuật "62.5%" phổ biến), 1.5rem bằng 15px. Công cụ tính lại ngay lập tức.

Việc chuyển rem sang px có phụ thuộc vào lồng phần tử không?

Không. Vì rem luôn tương đối theo cỡ chữ gốc, việc lồng nhau không ảnh hưởng đến phép quy đổi. Đó là điều khiến rem dễ dự đoán hơn em, vốn tương đối theo từng phần tử cha.

Việc chuyển đổi có thực hiện trên trình duyệt của tôi không?

Có. Mọi thứ được tính phía trình duyệt khi bạn gõ. Không có dữ liệu nào gửi lên máy chủ, nên công cụ chạy tức thì và vẫn hoạt động ngoại tuyến sau khi trang đã tải.