Công cụ chuyển đổi PX sang REM

rem là gì?

rem là viết tắt của “root em”: 1rem bằng kích thước font của phần tử gốc <html>. Trình duyệt mặc định là 16px, nên 1.5rem = 24px. Điểm khác biệt chính so với pixel là rem tôn trọng cài đặt cỡ chữ mặc định của người dùng: ai đặt font mặc định 20px sẽ thấy chữ và khoảng cách lớn hơn theo tỷ lệ, trong khi giá trị px cố định sẽ bỏ qua điều này.

Công thức chuyển đổi

rem = px ÷ font gốc và px = rem × font gốc. Với font gốc mặc định 16px: 12px = 0.75rem, 14px = 0.875rem, 18px = 1.125rem, 32px = 2rem. em dùng cùng phép tính nhưng chia cho kích thước font của chính phần tử (với font-size, là của phần tử cha), nên em sẽ cộng dồn khi lồng nhau.

Chuyển đổi cả file CSS

Công cụ chuyển đổi đoạn CSS tìm mọi số theo sau px và chia cho font gốc của bạn, đồng thời bỏ qua chú thích, chuỗi trong dấu nháy và đường dẫn url(…) (nên bg-16px.png được giữ nguyên). Giá trị 1px được giữ lại mặc định vì đường viền cần sắc nét. Bên trong media queries, rem và em luôn dựa trên font mặc định của trình duyệt (thường là 16px), không phải quy tắc html của bạn. Hãy tick Giữ nguyên @media queries nếu font gốc của bạn khác.

Mẹo 62.5% — và vì sao nên tránh

Đặt html { font-size: 62.5%; } khiến 1rem = 10px để dễ tính toán, nhưng khi đó mọi thành phần đều cần khai báo cỡ chữ rõ ràng và các widget bên thứ ba sẽ hiển thị chữ rất nhỏ. Giữ mặc định 16px và dùng công cụ chuyển đổi như thế này sẽ đơn giản và an toàn hơn.

rem trong Webflow

Menu đơn vị của Webflow hỗ trợ rem và em, và bạn có thể gõ trực tiếp 1.5rem vào ô. Lưu ý rằng cỡ chữ đặt ở thẻ Body (All Pages) của Webflow ảnh hưởng đến chữ kế thừa và em, nhưng không ảnh hưởng đến rem. rem luôn tham chiếu phần tử html. Với các giá trị co giãn theo màn hình, hãy tạo chúng bằng Máy tính clamp().

Cũng được tìm dưới tên: rem sang px, px sang em, em sang px, máy tính rem, đổi pixel sang rem, chuyển đổi kích thước font, font size gốc, đơn vị css.

Các công cụ dùng kèm tốt với Chuyển đổi PX sang REM

• Chuyển đổi đơn vị — Chuyển đổi giữa đơn vị hệ mét, đơn vị Anh-Mỹ và đơn vị kỹ thuật trong mười nhóm — có bộ chuyển đổi hai chiều và bảng tất cả đơn vị cùng lúc.
• Định dạng CSS — Chuyển stylesheet đã nén thành CSS dễ đọc, mỗi thuộc tính một dòng và các khối @media được lồng đúng cấu trúc.
• Nén CSS — Dán stylesheet vào để thu nhỏ ngay lập tức.
• Tạo Box Shadow CSS — Xếp nhiều lớp bóng đổ, chỉnh độ lệch, blur, spread và độ trong suốt trên thẻ xem trước trực tiếp, rồi sao chép CSS box-shadow hoặc text-shadow.