Công cụ chuyển đổi EM sang PX là gì?
Công cụ này giúp bạn quy đổi đơn vị em trong CSS thành số pixel tuyệt đối. Trong CSS, em là đơn vị tương đối: 1em bằng đúng cỡ chữ của phần tử cha (hoặc của chính phần tử đó đối với các thuộc tính không liên quan đến font). Vì trình duyệt thường đặt cỡ chữ gốc mặc định là 16px nên 1em thường tương đương 16px — tuy nhiên giá trị chính xác còn tùy thuộc vào cỡ chữ gốc mà bạn chọn.
Cách sử dụng
Nhập giá trị em mà bạn muốn quy đổi, sau đó nhập cỡ chữ gốc tính bằng pixel. Hầu hết trình duyệt đều mặc định ở mức 16px, nên ô này đã được điền sẵn giá trị đó. Bấm tính toán để xem số pixel tương ứng. Cách này rất tiện khi bạn cần đối chiếu thông số thiết kế cho theo pixel với các file stylesheet viết bằng em.
Giải thích công thức
Phép quy đổi chỉ đơn giản là một phép nhân:
$$\text{PX} = \text{EM value} \times \text{Base font size (px)}$$
Ví dụ, 1.5em với cỡ chữ gốc 16px sẽ bằng \(1.5 \times 16 = 24\text{px}\). Để làm ngược lại, hãy chia số pixel cho cỡ chữ gốc: \(\text{px} \div \text{cỡ chữ gốc} = \text{em}\).
Ví dụ minh họa
Giả sử một tiêu đề được đặt cỡ 2.5em và cỡ chữ gốc là 16px. Khi đó kích thước tính bằng pixel sẽ là $$2.5 \times 16 = 40\text{px}.$$ Nếu cỡ chữ gốc là 18px, thì cùng giá trị 2.5em đó sẽ hiển thị ở mức $$2.5 \times 18 = 45\text{px}$$ — cho thấy em co giãn theo cỡ chữ gốc như thế nào.
Câu hỏi thường gặp
1em có luôn bằng 16px không? Chỉ khi cỡ chữ gốc là giá trị mặc định 16px của trình duyệt. Nếu cỡ chữ của phần tử cha hoặc phần tử gốc khác đi thì 1em cũng thay đổi theo.
Em và rem khác nhau ở điểm nào? rem luôn tính tương đối so với cỡ chữ của phần tử gốc (html), trong khi em tính tương đối so với ngữ cảnh cỡ chữ gần nhất, do đó có thể bị kế thừa và cộng dồn qua nhiều cấp.
Tại sao nên dùng em thay vì px? Đơn vị em co giãn theo tùy chỉnh cỡ chữ của người dùng, giúp nâng cao khả năng tiếp cận và giúp bố cục typography linh hoạt dễ bảo trì hơn.
