Chuyển PX Sang EM - Công Cụ Đổi Đơn Vị CSS

Công Cụ Chuyển PX Sang EM

Công cụ này chuyển giá trị pixel (px) sang đơn vị em trong CSS. Khác với rem, đơn vị em tương đối theo cỡ chữ của chính phần tử cha (hoặc cha gần nhất), nên kết quả luôn phụ thuộc vào ngữ cảnh bạn đặt nó vào. Hãy đặt cỡ chữ gốc khớp với phần tử cha thực tế, gõ một giá trị pixel, và giá trị em tương đương hiện ra tức thì, sẵn sàng để dán vào file CSS.

Với cỡ gốc mặc định 16px, 16px = 1em. Hãy đổi cỡ chữ gốc trong phần cài đặt để khớp với ngữ cảnh phần tử cha nơi giá trị sẽ được dùng.

Khi Nào Nên Dùng EM

Định Cỡ Cấp Thành Phần

Tạo nút, nhãn và thẻ mà phần đệm và khoảng cách co giãn cùng nhau khi bạn đổi cỡ chữ của thành phần.

Khoảng Cách Tự Co Giãn

Gắn lề và phần đệm theo cỡ chữ cục bộ để chỉ cần đổi một cỡ chữ là toàn bộ khối được chỉnh kích thước theo tỷ lệ.

Nhịp Điệu Chữ

Biểu diễn chiều cao dòng, giãn chữ và thụt đầu dòng theo cỡ chữ hiện tại để giữ nhịp dọc nhất quán.

Cách Chuyển PX Sang EM

1

Đặt Cỡ Chữ Phần Tử Cha

Nhập cỡ chữ của phần tử cha vào ô Cỡ Chữ Gốc (mặc định 16px). Mọi kết quả em đều được tính dựa trên giá trị này.

2

Nhập Giá Trị Pixel

Đảm bảo tab đơn vị px đang được chọn, rồi gõ giá trị pixel cần chuyển. Giá trị em tương đương cập nhật ngay khi bạn gõ.

3

Đọc Kết Quả

Giá trị em hiện ra tức thì ở bảng kết quả, cùng giá trị rem và px tương đương để so sánh nhanh. Chỉnh số chữ số thập phân theo độ chính xác bạn cần.

4

Sao Chép Vào CSS

Nhấn nút sao chép cạnh kết quả em và dán thẳng vào file CSS, không cần chia tay.

Công thức: em = px ÷ cỡ chữ phần tử cha. Ví dụ, 24px ÷ 16px = 1.5em.

EM và REM: Phân Biệt Rõ

Cả hai đều là đơn vị tương đối nhưng tham chiếu đến những thứ khác nhau. Khác biệt then chốt là sự nhân chồng: giá trị em nhân lên khi các phần tử lồng nhau, còn rem luôn quy về gốc.

EM

Tương đối theo phần tử cha

Dựa trên cỡ chữ của cha gần nhất
Nhân chồng qua các phần tử lồng nhau
Hợp với các thành phần độc lập
Ngữ cảnh làm thay đổi giá trị tính được

REM

Tương đối theo gốc

Dựa trên cỡ chữ gốc (html)
Không bao giờ nhân chồng — luôn dự đoán được
Hợp với bố cục và kiểu chữ toàn trang
Cùng một giá trị ở mọi nơi trên trang

Cẩn thận với sự nhân chồng. Nếu phần tử cha đặt 1.25em và phần tử con cũng dùng 1.25em, con sẽ hiển thị ở mức 1.25 × 1.25 = ~1.56 lần cỡ của phần tử ông. Luôn xác nhận giá trị em của bạn được tính theo ngữ cảnh cha nào.

Quy Đổi PX Sang EM Thông Dụng

Giá trị tham khảo với phần tử cha 16px. Đổi cỡ gốc trong công cụ để tính lại cho mọi ngữ cảnh khác.

Pixel	EM (cha 16px)	Dùng cho
12px	`0.75em`	Chú thích, chữ nhỏ
14px	`0.875em`	Văn bản phụ, nhãn
16px	`1em`	Cỡ chữ thân bài
20px	`1.25em`	Đoạn dẫn, tiêu đề phụ
24px	`1.5em`	Tiêu đề mục
32px	`2em`	Tiêu đề trang

Câu Hỏi Thường Gặp

Cỡ chữ phần tử cha trong công cụ này chính xác là gì?

Đó là cỡ chữ của phần tử mà giá trị em của bạn sẽ tương đối theo. Trình duyệt tính em dựa trên cỡ chữ của tổ tiên gần nhất, nên hãy đặt ô này bằng giá trị mà phần tử cha đó hiển thị trong CSS thực tế. Mặc định 16px khớp với cỡ chữ mặc định thường thấy của trình duyệt cho thẻ body.

px được chuyển sang em như thế nào?

Chia giá trị pixel cho cỡ chữ phần tử cha: em = px ÷ cha. Với cha là 16px, 24px thành 1.5em. Công cụ tính tức thì và cho phép bạn điều chỉnh số chữ số thập phân hiển thị.

Nên dùng em hay rem?

Dùng em khi bạn muốn kích thước co giãn theo thành phần cục bộ — ví dụ phần đệm lớn dần theo chữ trong nút. Dùng rem cho bố cục và kiểu chữ toàn trang khi muốn một giá trị nhất quán khắp trang. Nhiều thiết kế kết hợp cả hai.

Vì sao giá trị em của tôi như bị nhân lên khi lồng nhau?

Đó là sự nhân chồng. Vì mỗi em tương đối theo phần tử cha của nó, việc lồng các phần tử mà mỗi cái đều đặt cỡ chữ bằng em sẽ nhân hiệu ứng lên. Nếu bạn cần giá trị giữ nguyên dù lồng sâu đến đâu, hãy dùng rem.

Việc chuyển đổi có thực hiện trên trình duyệt của tôi không?

Có. Phép tính chạy hoàn toàn phía trình duyệt khi bạn gõ. Không có gì gửi lên máy chủ, nên công cụ chạy tức thì và vẫn hoạt động ngoại tuyến sau khi trang đã tải.