Chuyển đổi giữa px, em và rem
Mặc định browser là 16px
| PX | EM | REM | % |
|---|---|---|---|
| 8px | 0.5em | 0.5rem | 50% |
| 10px | 0.625em | 0.625rem | 62.5% |
| 12px | 0.75em | 0.75rem | 75% |
| 14px | 0.875em | 0.875rem | 87.5% |
| 16px | 1em | 1rem | 100% |
| 18px | 1.125em | 1.125rem | 112.5% |
| 20px | 1.25em | 1.25rem | 125% |
| 24px | 1.5em | 1.5rem | 150% |
| 28px | 1.75em | 1.75rem | 175% |
| 32px | 2em | 2rem | 200% |
| 36px | 2.25em | 2.25rem | 225% |
| 40px | 2.5em | 2.5rem | 250% |
| 48px | 3em | 3rem | 300% |
| 56px | 3.5em | 3.5rem | 350% |
| 64px | 4em | 4rem | 400% |
| 72px | 4.5em | 4.5rem | 450% |
Công cụ PX to EM/REM Converter của Tấn Phát Digital giúp bạn chuyển đổi giữa các đơn vị CSS một cách nhanh chóng và chính xác. Hỗ trợ chuyển đổi hai chiều giữa px, em và rem. Tùy chỉnh base font-size (mặc định 16px theo browser standard). Bảng chuyển đổi nhanh với 16 kích thước phổ biến từ 8px đến 72px. Copy giá trị với một click. Tính toán realtime khi bạn nhập. Công cụ thiết yếu cho responsive web design và accessibility. Hoàn toàn miễn phí, không cần đăng ký.
Trong responsive web design hiện đại, em và rem là đơn vị được khuyến nghị thay vì px cố định. REM (root em) dựa trên font-size của root element (html), giúp scale toàn bộ UI chỉ bằng cách thay đổi một giá trị. EM dựa trên font-size của parent element, linh hoạt cho component-based design. Theo WCAG 2.1 accessibility guidelines, user có thể tăng font-size trong browser settings - nếu bạn dùng px cố định, layout có thể bị vỡ. Với rem/em, layout tự động scale theo user preference. Google cũng ưu tiên mobile-friendly sites trong ranking, và responsive units là một phần quan trọng. Công cụ này giúp bạn convert từ px (dễ hình dung) sang rem/em (responsive) một cách dễ dàng.
REM (root em) luôn dựa trên font-size của html element (thường 16px). 1rem = 16px (với default). REM predictable, dễ tính toán, phù hợp cho: spacing (margin, padding), font-sizes, media queries. EM dựa trên font-size của parent element, có thể compound (nested elements). 1em trong element có font-size 20px = 20px. EM phù hợp cho: component internal spacing (button padding scale theo button font-size), media queries trong component. Best practice: dùng REM cho global sizing, EM cho component-specific sizing.
Công thức: rem/em = px / base-font-size. Với base 16px: 24px = 24/16 = 1.5rem. 14px = 14/16 = 0.875rem. 12px = 12/16 = 0.75rem. Trong thực tế, nhiều developer đặt html { font-size: 62.5% } để 1rem = 10px, dễ tính hơn: 16px = 1.6rem, 14px = 1.4rem. Tuy nhiên, cách này có thể gây confusion và không được khuyến nghị bởi một số style guides. Công cụ này hỗ trợ cả hai cách - chỉ cần đổi base font-size.
Một pattern phổ biến là thay đổi root font-size theo breakpoint: html { font-size: 14px } @media (min-width: 768px) { html { font-size: 16px } } @media (min-width: 1200px) { html { font-size: 18px } }. Với cách này, toàn bộ UI (nếu dùng rem) tự động scale theo screen size. Headings, paragraphs, spacing đều tăng/giảm proportionally. Đây là cách tiếp cận 'fluid typography' đơn giản và hiệu quả.
16px là default font-size của hầu hết browsers (Chrome, Firefox, Safari, Edge). Khi user không thay đổi settings, 1rem = 16px. Đây là convention được W3C và browser vendors thống nhất để đảm bảo consistency.
Nếu parent có font-size: 1.5em (24px với base 16px), và child có font-size: 1.5em, thì child = 1.5 * 24px = 36px. Em compound qua mỗi level nesting. Đây là lý do rem (không compound) thường được prefer cho font-sizes.
Cả hai đều được, nhưng em được khuyến nghị hơn cho media queries. Lý do: em trong media query dựa trên browser default (16px), không bị ảnh hưởng bởi html font-size bạn set. Điều này đảm bảo breakpoints consistent ngay cả khi user zoom.
Có 2 cách: (1) Dùng công cụ này để convert. (2) Set html { font-size: 62.5% } để 1rem = 10px, sau đó 16px = 1.6rem, 14px = 1.4rem. Cách 2 dễ tính nhưng có thể gây confusion cho team members không biết convention này.
Về cơ bản giống nhau: 100% = 1em. Tuy nhiên, % thường dùng cho width/height (relative to parent), còn em thường dùng cho font-size và spacing. Trong font-size, 150% = 1.5em. Công cụ hiển thị cả % để bạn có thêm option.
Chúng tôi không chỉ thiết kế website, mà còn giúp doanh nghiệp xây dựng thương hiệu số mạnh mẽ. Cung cấp dịch vụ thiết kế website trọn gói từ thiết kế đến tối ưu SEO. Hãy liên hệ ngay với Tấn Phát Digital để cùng tạo nên những giải pháp công nghệ đột phá, hiệu quả và bền vững cho doanh nghiệp của bạn tại Hồ Chí Minh.
