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

Công cụ Chuyển đổi PX sang REM biến các giá trị pixel thành đơn vị rem hoặc em — và chuyển ngược lại — bằng cỡ chữ gốc mà dự án của bạn thực sự sử dụng. Dán một giá trị hoặc cả thang cỡ chữ, bạn sẽ nhận được các số đã chuyển đổi, một khối CSS sẵn sàng sao chép với pixel ban đầu được giữ lại dưới dạng chú thích, một thước hiển thị từng kích thước theo đúng tỷ lệ, cùng bản xem trước cho biết các giá trị rem phản hồi ra sao khi khách truy cập tăng cỡ chữ trình duyệt.

Công thức PX sang REM

Chuyển đổi giữa pixel và rem chỉ cần một phép chia — điều duy nhất bạn cần biết là cỡ chữ gốc của tài liệu.

Với cỡ chữ gốc mặc định 16 px của trình duyệt, ta có 24px ÷ 16 = 1.5rem và 1.5rem × 16 = 24px. Nếu biểu định kiểu của bạn đặt html { font-size: 62.5%; }, cỡ chữ gốc sẽ là 10 px và cùng 24 px sẽ bằng 2.4rem.

Bảng chuyển đổi PX sang REM (cỡ chữ gốc 16px)

rem và em: Vì sao việc lồng nhau thay đổi mọi thứ

rem được đo dựa trên phần tử gốc (html), vì vậy nó có cùng ý nghĩa ở mọi nơi trong tài liệu. em được đo dựa trên cỡ chữ được tính toán của phần tử cha, nên các giá trị em giống nhau sẽ cộng dồn khi bạn lồng chúng. Sơ đồ này cho thấy cùng một hệ số 1.5 được áp dụng sâu đến ba cấp, bắt đầu từ cỡ chữ gốc 16 px:

Quy tắc thực tế mà hầu hết các nhóm áp dụng là: dùng rem cho cỡ chữ, khoảng cách bố cục và điểm ngắt; dùng em có chủ đích cho những thứ nên co giãn theo chính thành phần của chúng, chẳng hạn phần đệm bên trong nút hoặc kích thước biểu tượng đặt cạnh văn bản.

Vì sao nên dùng rem thay cho px?

• Khả năng tiếp cận. Khách truy cập đặt cỡ chữ mặc định của trình duyệt là 20 px sẽ thấy mọi kích thước dựa trên rem tăng theo tỷ lệ. Các kích thước ghi cứng bằng px hoàn toàn bỏ qua tùy chọn đó.
• Một nút điều chỉnh cho việc co giãn toàn cục. Thay đổi cỡ chữ gốc trong media query và toàn bộ thang cỡ chữ cùng nhịp điệu khoảng cách sẽ thay đổi đồng thời — không cần ghi đè từng thành phần.
• Nhịp điệu khoảng cách nhất quán. Dùng rem cho phần đệm và lề giúp nhịp điệu dọc gắn với thang cỡ chữ thay vì lệch khỏi nhau.
• Thân thiện với design token. Các hệ thống thiết kế hiện đại (và thang mặc định của Tailwind) công bố kích thước theo rem, nên chuyển đổi các giá trị px hiện có giúp bàn giao dễ dàng hơn.

Thủ thuật cỡ chữ gốc 62.5%

Nhiều nhóm thêm quy tắc này để 1rem bằng 10 px tròn, giúp việc chuyển đổi nhẩm trở nên đơn giản:

html { font-size: 62.5%; }  /* 16px × 0.625 = 10px */
body { font-size: 1.6rem; } /* trở lại mức 16px dễ đọc */

.card-title { font-size: 2.4rem; } /* 24px */
.card-body  { font-size: 1.4rem; } /* 14px */

Vì 62.5% là phần trăm của mặc định trình duyệt chứ không phải giá trị pixel cố định, nó vẫn tôn trọng tùy chọn cỡ chữ của khách truy cập. Điều cần nhớ là đặt lại body về khoảng 1.6rem, nếu không văn bản mặc định sẽ hiển thị ở 10 px. Đặt trường cỡ chữ gốc ở trên thành 10 để chuyển đổi theo thiết lập này.

rem trong Media Query

Trong media query, rem được tính theo cỡ chữ gốc ban đầu của trình duyệt — không phải cỡ chữ html mà bạn đặt trong CSS. Vì vậy @media (min-width: 48rem) luôn là 768 px, ngay cả khi biểu định kiểu của bạn khai báo html { font-size: 10px }. Điều đó khiến các điểm ngắt rem an toàn và dễ dự đoán, đồng thời đây là một trong số ít nơi em và rem hoạt động giống hệt nhau.

Khi nào vẫn nên dùng px

• Đường viền mảnh và đường phân cách — đường viền 1 px nên giữ nguyên 1 px; co giãn nó sẽ tạo ra các đường dưới pixel bị mờ.
• Tài nguyên kích thước cố định — độ lệch sprite, độ lệch bóng chính xác và hình ảnh có kích thước nội tại đã biết.
• Canvas và đầu ra in — khi phép đo theo kích thước vật lý hoặc pixel thiết bị thực sự là điều bạn muốn.

Cách sử dụng công cụ chuyển đổi này

1. Chọn hướng: px → rem, rem → px, px → em hoặc em → px.
2. Nhập các giá trị: một số hoặc cả thang được phân tách bằng dấu phẩy hoặc khoảng trắng (tối đa 20 giá trị mỗi lần). Các đơn vị ở cuối như 24px được chấp nhận và bỏ qua.
3. Đặt cỡ chữ gốc: giữ 16 theo mặc định trình duyệt hoặc chạm vào chip cài sẵn cho 10 (thủ thuật 62.5%), 12, 14, 18 hoặc 20.
4. Nhấp vào Chuyển đổi: đọc bảng kết quả, thước kích thước theo tỷ lệ thực, bản xem trước khả năng tiếp cận và khối CSS.
5. Sao chép CSS: một nút sao chép mọi khai báo font-size, giữ giá trị pixel nguồn trong một chú thích.

Câu hỏi thường gặp

Làm cách nào để chuyển px sang rem?

Chia giá trị pixel cho cỡ chữ gốc. Với cỡ chữ gốc mặc định 16 px của trình duyệt, 24 px ÷ 16 = 1.5rem. Để chuyển theo chiều ngược lại, nhân giá trị rem với cỡ chữ gốc: 1.5rem × 16 = 24 px.

1rem bằng bao nhiêu px?

1rem bằng cỡ chữ gốc của trang. Trong mọi trình duyệt chính, mặc định là 16 px, vì vậy 1rem là 16 px trừ khi phần tử html hoặc cài đặt trình duyệt của khách truy cập thay đổi nó.

Sự khác biệt giữa rem và em là gì?

rem luôn tương đối với cỡ chữ gốc trên phần tử html, vì vậy 1.5rem có cùng kích thước ở mọi nơi trong tài liệu. em tương đối với cỡ chữ của phần tử cha trực tiếp, nên các phần tử lồng nhau sẽ cộng dồn: 1.5em bên trong một 1.5em khác hiển thị ở mức 2.25 lần kích thước cơ sở.

Thủ thuật cỡ chữ gốc 62.5 phần trăm là gì?

Đặt html { font-size: 62.5%; } khiến cỡ chữ gốc là 10 px thay vì 16 px, vì vậy 1rem bằng 10 px và phép tính nhẩm trở nên đơn giản: 24 px là 2.4rem. Nó vẫn thay đổi theo tùy chọn cỡ chữ trình duyệt của khách truy cập vì 62.5% là tương đối, không phải giá trị pixel tuyệt đối.

Tôi nên dùng px hay rem cho cỡ chữ?

Dùng rem cho cỡ chữ, khoảng cách và media query để bố cục mở rộng khi khách truy cập tăng cỡ chữ mặc định của trình duyệt. Dành px cho các giá trị không được phép thay đổi kích thước, như đường viền mảnh, đường phân cách một pixel và một số độ lệch bóng đổ.

Các giá trị rem có cần là số tròn không?

Không. Trình duyệt xử lý tốt các giá trị rem phân số và tính kích thước dưới pixel ở bên trong. Nếu thích các số gọn gàng, hãy chọn cỡ chữ gốc chia đều thang của bạn, chẳng hạn 10 px hoặc 8 px, hoặc dùng tùy chọn độ chính xác thập phân của công cụ chuyển đổi này.

rem có hoạt động với padding, margin và media query không?

Có. rem hợp lệ ở mọi nơi CSS chấp nhận một độ dài, bao gồm padding, margin, width, gap và border-radius. Trong media query, rem được tính theo cỡ chữ gốc ban đầu 16 px thay vì cỡ chữ html tùy chỉnh của bạn, vì vậy điểm ngắt 48rem luôn là 768 px.

Tài nguyên bổ sung

• Đơn vị độ dài CSS - MDN
• Độ dài tương đối theo cỡ chữ - Giá trị CSS W3C