Chuyển đến nội dung
🛠️
Whiz Tools

Trình chuyển đổi PX sang REM sang EM – Máy tính đơn vị CSS miễn phí

Chuyển đổi pixel sang đơn vị REM và EM ngay lập tức. Trình chuyển đổi đơn vị CSS miễn phí cho thiết kế web đáp ứng. Hỗ trợ kích thước phông chữ tùy chỉnh và tính toán trực tiếp để có kết quả chính xác.

Trình chuyển đổi đơn vị PX, REM và EM

Chuyển đổi giữa pixel (PX), root em (REM) và em (EM). Nhập giá trị vào bất kỳ trường nào để xem các giá trị tương đương ở các đơn vị khác.

px
px
px
rem
em
Không thể hiển thị hình ảnh minh họa cho các giá trị âm hoặc bằng không

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

  • PX sang REM: giá trị px ÷ kích thước phông chữ gốc
  • PX sang EM: giá trị px ÷ kích thước phông chữ phần tử cha
  • REM sang PX: giá trị rem × kích thước phông chữ gốc
  • EM sang PX: giá trị em × kích thước phông chữ phần tử cha
Máy tính tải...
📚

Tài liệu hướng dẫn

Công cụ chuyển đổi đơn vị PX, REM và EM

Công cụ chuyển đổi px sang rem và em chuyển đổi độ dài CSS giữa pixel (px), em gốc (rem) và em, bằng cách sử dụng cỡ chữ gốc và cỡ chữ của phần tử cha do người dùng đặt. Ba đơn vị này là những cách phổ biến nhất để định cỡ văn bản và khoảng cách trong CSS, ngôn ngữ dùng để tạo kiểu cho trang web.

Px, rem và em là gì?

Pixel (px) là một đơn vị cố định. Một hộp được đặt chiều rộng là 200px sẽ luôn rộng 200px, bất kể trang sử dụng cỡ chữ nào.

Rem ("em gốc") là một đơn vị thay đổi theo cỡ chữ của phần tử gốc của trang, thường là thẻ <html>. Hầu hết trình duyệt đặt cỡ chữ gốc là 16px, trừ khi trang web thay đổi giá trị này. Nếu cỡ chữ gốc là 16px, thì 1rem bằng 16px.

Em là một đơn vị thay đổi theo cỡ chữ của phần tử cha, tức phần tử chứa nó. Nếu một phần tử cha có font-size: 20px, thì 1em bên trong phần tử đó bằng 20px.

Khác biệt chính giữa rem và em nằm ở cơ sở mà mỗi đơn vị dùng để đo. Rem luôn dựa trên phần tử gốc. Em dựa trên phần tử cha gần nhất, nên giá trị của nó có thể thay đổi ở mỗi cấp lồng nhau.

Cách tính px sang rem

Để chuyển pixel sang rem, chia giá trị pixel cho cỡ chữ gốc:

r=pRr = \frac{p}{R}

trong đó r là độ dài tính bằng rem, p là độ dài tính bằng pixel và R là cỡ chữ gốc tính bằng pixel.

Ví dụ minh họa

Với cỡ chữ gốc mặc định là 16px, 24px được chuyển đổi thành:

24 ÷ 16 = 1,5rem

Nếu trang web đặt cỡ chữ gốc là 10px, một thủ thuật phổ biến bằng cách đặt html { font-size: 62.5%; }, vì 62,5% của 16px là 10px, thì 24px tương ứng với:

24 ÷ 10 = 2,4rem

Cách tính rem sang px

Để chuyển theo chiều ngược lại, nhân giá trị rem với cỡ chữ gốc:

p=r×Rp = r \times R

trong đó p là độ dài tính bằng pixel, r là độ dài tính bằng rem và R là cỡ chữ gốc.

Với phần tử gốc có cỡ chữ 16px, 1.5rem được chuyển ngược thành 1,5 × 16 = 24px.

Cách tính px sang em

Để chuyển pixel sang em, chia giá trị pixel cho cỡ chữ của phần tử cha:

e=pPe = \frac{p}{P}

trong đó e là độ dài tính bằng em và P là cỡ chữ của phần tử cha tính bằng pixel.

Ví dụ minh họa

Nếu cỡ chữ của phần tử cha là 20px, thì 24px được chuyển đổi thành:

24 ÷ 20 = 1,2em

Cách tính em sang px

Nhân giá trị em với cỡ chữ của phần tử cha:

p=e×Pp = e \times P

trong đó p là độ dài tính bằng pixel, e là độ dài tính bằng em và P là cỡ chữ của phần tử cha.

Với phần tử cha có cỡ chữ 20px, 1.2em được chuyển ngược thành 1,2 × 20 = 24px.

Cách tính rem sang em và em sang rem

Vì rem và em dựa trên các cỡ chữ khác nhau, việc chuyển đổi giữa chúng cần cả cỡ chữ gốc lẫn cỡ chữ của phần tử cha:

e=r×RPe = r \times \frac{R}{P}

r=e×PRr = e \times \frac{P}{R}

trong đó R là cỡ chữ gốc và P là cỡ chữ của phần tử cha.

Ví dụ minh họa

Với cỡ chữ gốc là 16px và cỡ chữ của phần tử cha là 20px, 2rem được chuyển đổi thành:

2 × (16 ÷ 20) = 1,6em

Nếu cỡ chữ gốc và cỡ chữ của phần tử cha bằng nhau, 1rem luôn bằng 1em.

Khi nào nên dùng từng đơn vị

Pixel phù hợp với những chi tiết không nên thay đổi kích thước, chẳng hạn đường viền 1px hoặc biểu tượng có chiều rộng cố định.

Rem thường được dùng cho khoảng cách và kiểu chữ cần giữ nhất quán trên toàn trang. Vì luôn dựa trên cỡ chữ gốc, giá trị rem không thay đổi dù phần tử được lồng sâu đến đâu. Điều này cũng có nghĩa là bố cục dựa trên rem tự động điều chỉnh khi người dùng tăng cỡ chữ mặc định của trình duyệt, giúp những người có thị lực kém đọc dễ hơn.

Em phù hợp bên trong một thành phần độc lập, chẳng hạn nút, khi khoảng đệm cần thay đổi theo cỡ chữ riêng của nút đó. Một vấn đề thường gặp với em là hiệu ứng cộng dồn: nếu nhiều phần tử lồng nhau đều dùng font-size: 1.2em, mỗi cấp sẽ nhân giá trị của cấp trước, khiến cỡ chữ tăng nhanh hơn dự kiến.

1.level-1 { font-size: 1.2em; }  /* 19.2px, if the parent is 16px */
2.level-2 { font-size: 1.2em; }  /* 23.04px (19.2px × 1.2) */
3.level-3 { font-size: 1.2em; }  /* 27.65px (23.04px × 1.2) */
4

Sau ba cấp, văn bản đã tăng khoảng 73%, chứ không phải 20% như nhà phát triển có thể dự tính từ một quy tắc 1.2em duy nhất.

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

  1. Nhập một giá trị vào trường pixel, rem hoặc em.
  2. Hai trường còn lại sẽ tự động cập nhật và được làm tròn đến bốn chữ số thập phân.
  3. Đặt cỡ chữ gốc khớp với phần tử <html> của dự án. Theo mặc định, giá trị này là 16px trong hầu hết trình duyệt và chỉ ảnh hưởng đến rem.
  4. Đặt cỡ chữ của phần tử cha khớp với cỡ chữ của phần tử chứa giá trị em. Giá trị này chỉ ảnh hưởng đến em.
  5. Dùng nút sao chép bên cạnh một trường để sao chép giá trị của trường đó.

Cả hai trường cỡ chữ đều nhận số pixel nguyên và giá trị nhỏ nhất được phép là 1px. Nút đặt lại sẽ xóa giá trị và đưa cả hai cỡ chữ về 16px.

Bên dưới các trường, công cụ vẽ một thanh cho mỗi đơn vị. Cả ba thanh biểu thị cùng một độ dài thực, nên chúng có cùng chiều rộng; đây là cách kiểm tra nhanh xem phép chuyển đổi có chính xác hay không. Thanh được vẽ theo đúng độ dài pixel thực tế tối đa 300px; mọi giá trị dài hơn sẽ được thu nhỏ để vừa khung, vì vậy giá trị 600px và giá trị 900px đều kết thúc ở 300px. Các thanh chỉ xuất hiện khi giá trị pixel lớn hơn 0.

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

Rem và em khác nhau như thế nào? Rem luôn dựa trên cỡ chữ của phần tử gốc. Em dựa trên cỡ chữ của phần tử cha gần nhất. Giá trị rem giữ nguyên ở mọi vị trí trên trang; giá trị em có thể thay đổi tùy theo độ sâu lồng nhau của phần tử.

Tại sao trình duyệt dùng 16px làm cỡ chữ mặc định? 16px từ lâu đã là cỡ chữ mặc định trong các trình duyệt lớn vì dễ đọc trên những màn hình thông thường mà không cần tạo kiểu bổ sung. Hướng dẫn về khả năng tiếp cận web khuyến nghị văn bản có thể được phóng to đến 200% mà không làm hỏng bố cục trang, và 16px là điểm khởi đầu thực tế cho việc đó.

Thủ thuật 62,5% là gì? Đặt html { font-size: 62.5%; } sẽ biến cỡ chữ gốc mặc định 16px thành 10px, vì 62,5% của 16 là 10. Điều này giúp phép tính rem đơn giản hơn, vì 1,6rem bằng 16px và 2,4rem bằng 24px.

Giá trị px, rem và em có thể là số âm không? Có, đối với những thuộc tính chấp nhận độ dài âm, chẳng hạn lề hoặc phép biến đổi CSS. Trong CSS, khoảng đệm không thể là số âm; trình duyệt sẽ bỏ qua giá trị khoảng đệm âm. Công cụ xử lý các giá trị âm nhưng không vẽ thanh cho chúng, vì thanh không thể có chiều rộng âm.

Có nên chuyển mọi giá trị pixel sang rem không? Không nhất thiết. Đường viền và các chi tiết nhỏ khác thường được giữ ở dạng pixel, vì chúng hiếm khi cần thay đổi theo cỡ chữ và có thể trông không đều khi chiều rộng nhỏ hơn một pixel. Rem phù hợp với khoảng cách và kiểu chữ cần thay đổi theo tùy chọn cỡ chữ của người dùng.

Việc chọn đơn vị có ảnh hưởng đến hiệu suất trang không? Không. Trong quá trình dàn trang, trình duyệt chuyển mọi độ dài CSS thành cùng một giá trị nội bộ, nên px, rem và em được hiển thị với tốc độ như nhau. Việc lựa chọn giữa chúng ảnh hưởng đến khả năng bảo trì và khả năng tiếp cận, không ảnh hưởng đến tốc độ.