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.
+ Advanced
Kết quả tương đươ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.
Quy tắc nhanh
- 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.
Tip dùng tool
- Đổ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.
Phù hợp với ai
Frontend dev, UI/UX designer, ai cần prototype visual nhanh hoặc sinh CSS chuẩn copy-paste cho dự án Tailwind/React/Vue.
Câu hỏi thường gặp
CSS sinh ra có dùng được với Tailwind không?
Có. Output là CSS chuẩn vanilla, paste vào file .css bất kỳ. Nếu dự án dùng Tailwind, có thể đặt vào layer @utilities hoặc theme override.
Có hỗ trợ trình duyệt cũ không?
Output dùng cú pháp CSS modern (custom properties, grid, gap). Hoạt động tốt trên Chrome/Firefox/Safari 2020+. IE11 KHÔNG được hỗ trợ.
Công cụ liên quan
Xem tất cả công cụ →Color Picker
Pick HEX/RGB/HSL, slider RGB, 12 màu mẫu, gợi ý tên Tailwind gần nhất.
MỚITailwind ↔ CSS Converter
Convert giữa Tailwind utility classes và CSS thuần. ~200 utility (spacing, color, flex, grid…). Hỗ trợ migrate dự án.
MỚISVG → React/JSX
Convert SVG sang React component. camelCase attribute, currentColor, TypeScript types, size/color props.
MỚICSS Animation Builder
Visual builder cho CSS animation. 10 preset (fadeIn, bounce, pulse, spin, shake…). Tinh chỉnh duration, easing, iteration.