Chuyển đến nội dung
Logo CrateX.app

CrateX.app

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

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

Bộ chuyển đổi đơn vị CSS giúp đổi px, rem, em, %, vw, vh và pt với thiết lập font root, parent, viewport và DPI cho layout responsive.

Pixel
px
Chạm để chuyển đổi đơn vị

Đơn vị chiều dài

Kiểu chữ

Khung nhìn

Phần trăm

Tỷ lệ với cỡ chữ root
rem
Chạm để chuyển đổi đơn vị

Đơn vị chiều dài

Kiểu chữ

Khung nhìn

Phần trăm
Bộ chuyển đổi đơn vị CSS

Bắt đầu nhanh

1
Nhập giá trị và đơn vị: ví dụ 16 + px, hoặc 1 + rem.
2
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.
3
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.
4
Cài đặt chỉ áp dụng cho rem/em/%/vw/vh; không dùng cho các đơn vị tuyệt đối.
5
Xem kết quả: các đơn vị khác được tính tức thì và có thể sao chép.
6
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.

Tình huống bổ sung

chuyển đổi em, đơn vị viewport và máy tính CSS cũng có thể được xử lý trong cùng một luồng để bạn kiểm tra kết quả nhanh hơn trước khi sao chép hoặc xuất ra.

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

4

Tiếp tục bước tiếp theo với các công cụ liên quan này.