Công cụ chuyển đổi EM sang PX là gì?
EM và PX là hai đơn vị phổ biến trong CSS dùng để định cỡ chữ, khoảng cách và bố cục. Pixel (PX) là đơn vị tuyệt đối, trong khi EM lại phụ thuộc vào cỡ chữ của phần tử cha. Công cụ này giúp bạn chuyển đổi giá trị giữa hai đơn vị, để bạn có thể tự tin chuyển qua lại giữa kích thước cố định và kích thước co giãn khi xây dựng website responsive.
Cách sử dụng
Trước tiên hãy chọn hướng chuyển đổi — EM sang PX hoặc PX sang EM — rồi nhập giá trị của bạn cùng cỡ chữ gốc tính bằng pixel. Cỡ chữ gốc mặc định của trình duyệt là 16px, và con số này đã được điền sẵn cho bạn. Nhấn nút tính toán để xem kết quả chuyển đổi ngay tức thì.
Giải thích công thức
Phép chuyển đổi dựa trên một tỷ lệ đơn giản. Để đổi EM sang PX, bạn nhân:
$$\text{px} = \text{em} \times \text{cỡ gốc}$$Để đổi ngược lại, bạn chia:
$$\text{em} = \frac{\text{px}}{\text{cỡ gốc}}$$Cỡ gốc chính là cỡ chữ (tính bằng pixel) mà giá trị EM được tham chiếu theo.
Ví dụ minh họa
Giả sử bạn muốn đổi 1.5em với cỡ chữ gốc là 16px. Áp dụng công thức px = em × cỡ gốc:
$$1.5 \times 16 = 24\ \text{px}$$Ngược lại, \(24 \div 16 = 1.5\ \text{em}\). Nếu cỡ gốc của bạn là 20px thay vì 16px, thì 1.5em sẽ tương đương 30px.
Câu hỏi thường gặp
Nên dùng cỡ chữ gốc nào? Hầu hết các trình duyệt mặc định ở mức 16px. Nếu bạn đã thay đổi font-size của phần tử gốc (root) hay phần tử cha trong CSS, hãy dùng giá trị đó.
EM có giống REM không? Không. REM luôn tham chiếu theo cỡ chữ của phần tử gốc (root), trong khi EM tham chiếu theo cỡ chữ của phần tử cha gần nhất. Khi chuyển đổi REM, bạn hãy dùng cỡ chữ gốc làm cỡ cơ sở.
Tại sao nên dùng EM? Đơn vị EM co giãn theo cỡ chữ, giúp thiết kế dễ tiếp cận và responsive hơn khi người dùng thay đổi cỡ chữ mặc định của họ.
