📐

CSS Unit Converter — px ↔ rem ↔ em

Đổi giữa px / rem / em / pt / % / vw / vh chuẩn CSS. Chỉnh base font-size + viewport. Phù hợp design system và responsive layout.

Giá trị

Đơn vị

Base font-size (px)

Mặc định 16px (browser default). Đổi nếu trang dùng font-size khác trên html/body.

+ Advanced

Parent font-size (px)

Cho em — kích thước font của element cha (default = base)

Viewport width

Viewport height

Giá trị thường dùng:

CSS Unit Converter giúp đổi qua lại giữa px / rem / em / pt / % / vw / vh. Hữu ích cho design system và responsive layout.

rem dựa trên font-size của <html> (root). em dựa trên font-size của element cha. Browser mặc định 16px.

Đơn vị CSS nào dùng khi nào?

px — pixel cố định. Dùng cho border, shadow, kích thước icon nhỏ. Không scale với người dùng zoom.
rem — relative to <html> font-size (mặc định 16px). Tốt cho font-size và spacing — scale tốt khi user đổi default font.
em — relative to font-size của element cha. Tốt cho padding/margin trong button, badge — scale theo context.
% — relative to giá trị tương ứng của parent (width/height/font-size). Hữu ích cho fluid layout.
vw / vh — 1% viewport width/height. Dùng cho hero section full screen, font-size responsive.
pt — point (1/72 inch). Hiếm dùng web — chủ yếu cho print, PDF.

16px = 1rem (browser default). Đây là cơ sở mọi tính toán.
Tailwind dùng rem: p-4 = 1rem = 16px (mặc định).
Font-size: dùng rem. Border, shadow: dùng px. Hero hero/section size: dùng vh.
Avoid em trong nested components — dễ scale không kiểm soát.

Đổi Base font-size nếu trang dùng html { font-size: 14px } — kết quả chuyển ngay.
Bấm preset 12px / 16px / 24px... để check nhanh font-size phổ biến.
Click "Copy" trên mỗi card để paste thẳng vào CSS.