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

Công Cụ Chuyển PX Sang REM

Công cụ này chuyển giá trị pixel (px) sang đơn vị rem trong CSS. Đơn vị rem luôn tương đối theo cỡ chữ của phần tử gốc (phần tử html), nên nó là lựa chọn hàng đầu cho các thiết kế responsive và dễ tiếp cận. Hãy đặt cỡ chữ gốc, gõ một giá trị pixel, và giá trị rem tương đương hiện ra tức thì, sẵn sàng để dán vào file CSS.

Hầu hết trình duyệt đặt cỡ gốc là 16px, nên 16px = 1rem. Nếu dự án của bạn đổi cỡ chữ của html, hãy cập nhật cỡ gốc trong phần cài đặt cho khớp.

Vì Sao Lập Trình Viên Chọn REM

Co Giãn Responsive

Chỉ cần đổi một cỡ chữ gốc trong media query là toàn bộ bố cục co giãn theo tỷ lệ — không phải sửa từng phần tử.

Khả Năng Tiếp Cận

rem tôn trọng tùy chọn cỡ chữ của trình duyệt, nên chữ và khoảng cách to lên cho người cần cỡ chữ lớn hơn.

Kích Thước Dự Đoán Được

Vì rem không bao giờ nhân chồng khi lồng nhau, một giá trị có ý nghĩa như nhau ở mọi nơi trên trang.

Cách Chuyển PX Sang REM

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 là 16px, mốc tiêu chuẩn của trình duyệt.

2

Nhập Giá Trị Pixel

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

3

Đọc Kết Quả

Giá trị rem hiện ra tức thì ở bảng kết quả, cùng giá trị em và px tương đương. Dùng tùy chọn số thập phân để kiểm soát độ chính xác làm tròn.

4

Sao Chép Vào CSS

Nhấn nút sao chép cạnh kết quả rem và dán thẳng vào file CSS của bạn.

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

REM, PX và EM

Chọn đúng đơn vị phụ thuộc vào việc bạn muốn kích thước cố định hay co giãn theo ngữ cảnh. Dưới đây là so sánh ba đơn vị.

Đơn vị	Tương đối theo	Co giãn theo cài đặt người dùng	Phù hợp cho
px	Không gì (tuyệt đối)	Không	Viền, đổ bóng, đường mảnh
rem	Cỡ chữ gốc	Có	Kiểu chữ, bố cục, khoảng cách
em	Cỡ chữ phần tử cha	Có	Định cỡ cục bộ trong thành phần

Thực hành tốt: dùng rem cho cỡ chữ, lề và phần đệm để giao diện co giãn hoàn toàn, và dành px cho những thứ không bao giờ nên đổi kích thước, như viền 1px.

Quy Đổi PX Sang REM 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.

Pixel	REM (gốc 16px)	Dùng cho
12px	`0.75rem`	Chú thích, chữ nhỏ
14px	`0.875rem`	Văn bản phụ, nhãn
16px	`1rem`	Cỡ chữ thân bài
18px	`1.125rem`	Cỡ đọc thoải mái
24px	`1.5rem`	Tiêu đề mục
32px	`2rem`	Tiêu đề trang

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

Cỡ chữ gốc là gì và vì sao quan trọng?

Đó là cỡ chữ gốc (html) mà rem được tính dựa theo. Trình duyệt mặc định là 16px, nên 1rem thường bằng 16px. Nếu CSS của bạn đặt cỡ gốc khác, hãy đổi ô này thành giá trị đó để quy đổi chính xác.

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

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

rem có tốt hơn px về khả năng tiếp cận không?

Nhìn chung là có. Vì rem co giãn theo tùy chọn cỡ chữ của trình duyệt, người tăng cỡ chữ mặc định sẽ có giao diện lớn lên theo tỷ lệ. Giá trị px cố định bỏ qua tùy chọn đó, có thể gây khó đọc.

rem có nhân chồng khi các phần tử lồng nhau không?

Không. Khác với em, rem luôn quy về cỡ chữ gốc, nên cùng một giá trị rem được hiển thị giống hệt nhau dù phần tử lồng sâu đến đâu. Tính dự đoán được này là một trong những ưu điểm lớn nhất của rem.

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

Có. Phép tính chạy hoàn toàn phía trình duyệt khi bạn gõ. Không có gì gửi lên máy chủ, nên kết quả tức thì và công cụ vẫn chạy ngoại tuyến sau khi đã tải.