nicetool.dev logo

Đổi PX sang REM

Gõ vào ô nào cũng được. Bấm một dòng trong bảng để nạp giá trị, hoặc dán CSS bên dưới để đổi cả đoạn.

24px = 1.5rem = 18pt = 150%

Bảng quy đổi (gốc 16px)

pxrempt
1px0.0625rem0.75pt
2px0.125rem1.5pt
4px0.25rem3pt
6px0.375rem4.5pt
8px0.5rem6pt
10px0.625rem7.5pt
12px0.75rem9pt
14px0.875rem10.5pt
16px1rem12pt
18px1.125rem13.5pt
20px1.25rem15pt
24px1.5rem18pt
28px1.75rem21pt
32px2rem24pt
36px2.25rem27pt
40px2.5rem30pt
48px3rem36pt
56px3.5rem42pt
64px4rem48pt
72px4.5rem54pt
80px5rem60pt
96px6rem72pt
128px8rem96pt

Đổi cả đoạn CSS

Đã đổi 6 giá trị
.card {
  padding: 1.5rem 2rem;
  margin-bottom: 1rem;
  font-size: 1.125rem;
  line-height: 1.75rem;
  border: 1px solid #e2e8f0;
  border-radius: 0.75rem;
}

px và rem khác nhau thế nào?

px là đơn vị CSS cố định, còn 1rem bằng cỡ chữ của phần tử gốc html, mặc định là 16px trên mọi trình duyệt. Dùng rem cho cỡ chữ, khoảng cách và bố cục giúp mọi thứ phóng to cùng nhau khi người dùng tăng cỡ chữ mặc định trong cài đặt trình duyệt, một yêu cầu quan trọng về khả năng tiếp cận (WCAG 1.4.4, Resize Text). Công thức đơn giản: rem = px / cỡ chữ gốc, nên 24px là 1.5rem với gốc 16px. em hoạt động tương tự nhưng tính theo cỡ chữ của phần tử cha, nên sẽ cộng dồn khi các phần tử lồng nhau.

Tính năng

  • • Đổi hai chiều px và rem với cỡ chữ gốc tùy chọn
  • • Hiện thêm giá trị pt và phần trăm tương ứng
  • • Bảng các cỡ phổ biến từ 1px đến 128px, bấm để chọn
  • • Đổi hàng loạt mọi giá trị px trong một đoạn CSS
  • • Tùy chọn giữ viền mảnh 1px ở đơn vị px

Chạy ngay trên máy

Mọi phép đổi diễn ra trong trình duyệt, kể cả đoạn CSS bạn dán vào. Không có gì được tải lên.

Tính toán tức thì, 100% phía client.

Cách dùng công cụ Đổi PX sang REM

  1. 1

    Kiểm tra cỡ chữ gốc: để 16px trừ khi dự án đặt html { font-size } khác, ví dụ 10px hay 62.5%.

  2. 2

    Gõ giá trị vào ô px để có rem, hoặc vào ô rem để có px. Dòng bên dưới hiện thêm pt và phần trăm.

  3. 3

    Bấm vào dòng bất kỳ trong bảng để nạp các cỡ phổ biến từ 1px đến 128px.

  4. 4

    Dán một đoạn CSS vào ô đổi hàng loạt: mọi giá trị px thành rem, 0px thành 0, và viền 1px có thể giữ nguyên px. Sao chép kết quả vào file CSS.

Ví dụ thực tế

Thang cỡ chữ

Thang chữ 14 / 16 / 20 / 24 / 32px thành 0.875 / 1 / 1.25 / 1.5 / 2rem, nên tiêu đề sẽ to lên khi người dùng phóng chữ trong trình duyệt.

Chuyển đổi file CSS cũ

Dán CSS cũ viết bằng px và đổi padding, margin, cỡ chữ một lượt, sau đó xem lại media query và giữ viền mảnh ở px.

Khớp thiết kế Figma

Designer bàn giao kích thước bằng px. Đổi các token khoảng cách 4, 8, 12, 16, 24px thành 0.25, 0.5, 0.75, 1, 1.5rem cho design system.

Mẹo 62.5%

Một số dự án đặt html { font-size: 62.5% } để 1rem = 10px. Đặt cỡ gốc là 10 thì 24px thành 2.4rem rất dễ nhớ.

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

Nên dùng rem hay px?+

Dùng rem cho cỡ chữ và phần lớn khoảng cách để bố cục tôn trọng cỡ chữ người dùng chọn. px vẫn ổn cho viền, đổ bóng và chi tiết nhỏ không cần phóng theo.

rem và em khác nhau thế nào?+

rem tính theo cỡ chữ của html gốc nên dễ đoán. em tính theo phần tử cha, nên các giá trị em lồng nhau sẽ nhân lên, hữu ích cho component nhưng dễ tính sai.

Gốc luôn là 16px phải không?+

Đó là mặc định trên mọi trình duyệt, nhưng người dùng có thể đổi và CSS có thể ghi đè trên html. Luôn quy đổi theo cỡ gốc mà dự án thực sự dùng.

Media query có nên dùng rem không?+

Media query bằng em hay rem tính theo cỡ chữ mặc định của trình duyệt, không theo rule html của bạn, và tự thích ứng khi người dùng phóng chữ. Vì vậy nhiều nhóm dùng em trong media query.