Chuyển đổi PX sang REM

Công cụ làm gì

Công cụ này chuyển độ dài CSS giữa pixel và các đơn vị tương đối rem, em. Nhập một giá trị như 24px để nhận 1.5rem, liệt kê nhiều giá trị mỗi dòng một cái để đổi cùng lúc, hoặc dán cả một stylesheet và mọi giá trị px trong đó sẽ được viết lại tại chỗ. Bảng tham chiếu hiển thị các kích thước thường dùng từ 1px đến 128px theo cỡ chữ gốc của bạn. Không có gì rời khỏi trình duyệt.

Cách dùng

1. Dán CSS hoặc nhập mỗi dòng một giá trị. Số không có đơn vị được hiểu là px (hoặc rem/em khi đảo chiều), và giá trị viết bằng đơn vị kia sẽ được đổi theo chiều ngược lại.
2. Đặt Cỡ chữ gốc. Mọi trình duyệt mặc định là 16px; một số dự án đặt html { font-size: 62.5% } để 1rem = 10px.
3. Chọn Chiều đổi (px → rem hoặc rem → px), Đơn vị (rem hoặc em) và Số chữ số thập phân muốn giữ.
4. Nếu cần, đặt Giữ px cho giá trị nhỏ hơn để viền 1px và các đường mảnh khác giữ nguyên px.
5. Sao chép kết quả bằng nút phía trên.

Ví dụ

/* before */
.title { font-size: 24px; margin-bottom: 12px; }

/* after (base 16px) */
.title { font-size: 1.5rem; margin-bottom: 0.75rem; }

Các giá trị không phải px như phần trăm, màu, tên tệp trong url() và tên lớp như .mt-16px được giữ nguyên. 0px thành 0.

px, rem và em

• px là đơn vị tuyệt đối, bỏ qua cỡ chữ mà người đọc ưa thích.
• rem (“root em”) là bội số cỡ chữ của phần tử html. Nếu người đọc đặt trình duyệt ở 20px, 1rem thành 20px và cả bố cục co giãn theo.
• em là bội số cỡ chữ của phần tử hiện tại. Tiện cho khoảng cách cần đi theo chữ của nó, nhưng em lồng nhau sẽ nhân dồn, vì thế rem là lựa chọn mặc định an toàn hơn.

Media query cũng được chuyển: @media (min-width: 768px) thành 48rem (hoặc 48em), giúp các điểm ngắt nhất quán khi người đọc phóng to chữ. Trong media query, rem và em đều tính theo cỡ chữ mặc định của trình duyệt chứ không theo quy tắc html của bạn.