Bộ chuyển đổi đơn vị CSS

Hỗ trợ chuyển đổi giữa các đơn vị CSS như px, em, rem, %, vw, vh, cung cấp cài đặt điểm ngắt phản hồi. Tự động tính toán các giá trị phụ thuộc ngữ cảnh, phù hợp cho phát triển bố cục phản hồi, triển khai frontend và thích ứng kiểu.

Hướng dẫn sử dụng

🚀 Bắt đầu nhanh

Nhập giá trị và đơn vị: ví dụ 16 + px, hoặc 1 + rem.
Chọn đơn vị nguồn (From) và nhập giá trị, sau đó chọn đơn vị đích (To); dùng Hoán đổi để đảo chiều nhanh.
Trên mobile: dùng mũi tên góc trên bên phải trong ngăn kéo để chuyển giữa From/To.
Cài đặt chỉ áp dụng cho rem/em/%/vw/vh; không dùng cho các đơn vị tuyệt đối.
Xem kết quả: các đơn vị khác được tính tức thì và có thể sao chép.
Breakpoint: chuyển giữa preset mobile/tablet/desktop để kiểm tra chuyển đổi trên các kích thước màn hình khác nhau.

📌 Tình huống sử dụng phổ biến

Tình huống sử dụng: bố cục responsive, bàn giao thiết kế‑tới‑dev, liên hệ giữa mật độ điểm ảnh/in ấn, thống nhất convention style.

🧭 Gợi ý sử dụng

Đặt base: root 16px là phổ biến, giúp tính nhẩm rem ↔ px dễ hơn.
Ưu tiên rem cho text: hỗ trợ scale toàn cục và a11y; dùng em cho scale nội bộ component.
Dùng đơn vị viewport cho bố cục: kết hợp với breakpoint và clamp() để tránh giá trị cực đoan.
Số thập phân & làm tròn: giữ độ chính xác hợp lý để tránh số khó đọc.

🎛️ Tham số & ngữ cảnh

REM base (Root Font Size): quyết định chuyển đổi rem ↔ px. 16px là base phổ biến trên web, giúp tính nhẩm dễ (1rem≈16px). Có thể chỉnh tạm khi thiết kế không dựa trên 16px.
EM base (Parent Font Size): quyết định em và % (khi tham chiếu là cỡ chữ). Hữu ích cho scale theo component: đổi cỡ chữ parent để scale cả block.
Tham chiếu %: chọn cỡ chữ/chiều rộng/chiều cao làm tham chiếu. Với bố cục hãy dùng Width/Height; với typography (ví dụ line-height) hãy dùng Font size.
Preset breakpoint: Mobile / Tablet / Desktop / Large đồng thời thiết lập kích thước viewport để ước lượng nhanh trên các bề rộng khác nhau. Đây chỉ là ước lượng, không phải media query runtime.
Kích thước viewport: dùng cho vw/vh/vmin/vmax và % (khi tham chiếu là width/height). Thiết bị thực tế có thể khác do thanh địa chỉ, safe area và thanh cuộn.
DPI (dots per inch): dùng cho đơn vị vật lý pt/pc/in/cm/mm/q ↔ px. Mặc định trên web là 96 DPI; với in ấn/HiDPI hãy đặt theo thiết bị, nếu không hãy coi là xấp xỉ.
Gợi ý: 1) 16px và 96 DPI là base phổ biến; 2) kiểm tra tỷ lệ % bố cục bằng cách đổi breakpoint; 3) các tham số này hỗ trợ ước lượng khi thiết kế, không thay thế kết quả tính toán DOM/CSS cuối cùng của trình duyệt.

⚠️ Giới hạn & khả năng tương thích

Tham chiếu % phụ thuộc thuộc tính (width/height/line‑height khác nhau); công cụ này ước lượng các trường hợp phổ biến.
ex/ch phụ thuộc thông số font; kết quả có thể khác nhau giữa font/trình duyệt.
Đơn vị viewport thay đổi khi có thanh cuộn/thanh địa chỉ/khu vực an toàn; hãy kỳ vọng có sai số nhỏ.
Đơn vị vật lý ↔ px thay đổi theo DPI; thiết bị in/HiDPI cần được kiểm tra thực tế.

🔒 Quyền riêng tư & bảo mật

Toàn bộ xử lý diễn ra trong trình duyệt; dữ liệu của bạn không rời khỏi thiết bị.

❓ Câu hỏi thường gặp

Sự khác nhau giữa rem và em là gì?

rem dựa trên cỡ chữ root (scale toàn cục dễ đoán); em dựa trên cỡ chữ của parent (rất phù hợp cho scale cục bộ component).

Tôi nên dùng px hay rem?

Nên ưu tiên rem cho bố cục và text (thân thiện a11y); px vẫn phù hợp cho icon/border cần sắc nét.

Vì sao vw/vh hoạt động khác nhau giữa các thiết bị?

Thanh địa chỉ/khu vực an toàn/thanh cuộn trên mobile làm thay đổi viewport; hãy kết hợp với clamp()/min()/max() và breakpoint.

Làm sao chuyển từ pixel màn hình sang đơn vị in ấn?

Hãy đặt đúng DPI (ví dụ 96/72/300). Chuyển đổi màn hình→in ở đây chỉ là ước lượng; trong production cần proof với quy trình ICC.