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

CrateX.app

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

Chuyển đổi một-một các đơn vị CSS giữa px, rem, em, %, vw, vh, vmin, vmax, pt, pc, in, cm, mm, q, ex và ch ngay trên thiết bị bằng cỡ chữ gốc, cỡ chữ tham chiếu EM, viewport và cài đặt tham chiếu phần trăm. Các đơn vị CSS tuyệt đối sử dụng tỷ lệ cố định 1in = 96px.

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

Đơn vị chiều dài

Kiểu chữ

Khung nhìn

Phần trăm

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à chọn đơn vị nguồn
2
Chọn đơn vị đích hoặc dùng Hoán đổi để đảo chiều
3
Đặt bối cảnh cỡ chữ gốc, tham chiếu EM, phần trăm và viewport khi cần; với EM, hãy sử dụng cỡ chữ thực tế mà thuộc tính dùng.
4
Sao chép kết quả đã chuyển đổi
5
Đổi preset viewport để kiểm tra vw/vh

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.
Sử dụng các đơn vị khung nhìn để ước tính bố cục: kết hợp với các điểm dừng và các ràng buộc tối thiểu/tối đa để tránh quá mức
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

Nền REM (cỡ chữ gốc): quyết định chuyển đổi rem ↔ px. 16px là nền 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.
Cỡ chữ tham chiếu EM: nhập cỡ chữ thực tế mà thuộc tính sử dụng. em thường sử dụng cỡ chữ được tính toán của phần tử hiện tại; với font-size và các thuộc tính tương tự có giá trị tương đối theo phông chữ, hãy sử dụng cỡ chữ cha. Giá trị tham chiếu này cũng được dùng để ước tính ex/ch và cho % khi chọn Cỡ chữ.
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.
Lời khuyên: 1) 16px là giá trị phổ biến cho cỡ chữ gốc và tham chiếu EM, nhưng hãy sử dụng cỡ chữ thực tế mà thuộc tính dùng; 2) xác minh tỷ lệ phần trăm của bố cục bằng cách chuyển đổi breakpoint; 3) các điều khiển này hỗ trợ ước tính trong giai đoạn thiết kế và không thay thế phép tính DOM/CSS cuối cùng của trình duyệt. Các đơn vị tuyệt đối luôn sử dụng 1in = 96px.

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

% tham chiếu phụ thuộc vào thuộc tính CSS, khối chứa và chế độ bố cục; công cụ này sử dụng tham chiếu kích thước phông chữ/chiều rộng khung nhìn/chiều cao khung nhìn đã chọn để ước tính, không phải phép đo gốc/vùng chứa trực tiếp
ex/ch là các giá trị gần đúng dựa trên cỡ chữ tham chiếu EM tại đây; kết quả không phải là phép kiểm tra số liệu phông chữ và sẽ khác nhau tùy theo phông chữ cũng như trình duyệt.
vw/vh/vmin/vmax cổ điển thay đổi tùy theo thanh cuộn/thanh địa chỉ/vùng an toàn; công cụ này không tính toán các đơn vị truy vấn dvh/svh/lvh, vi/vb, vùng an toàn hoặc vùng chứa
Phép chuyển đổi đơn vị CSS tuyệt đối sử dụng tỷ lệ cố định 1in = 96px. Việc liên hệ pixel vật lý trên màn hình với kích thước bản in đòi hỏi một quy trình riêng cho thiết bị/bản in mà công cụ này không cung cấp.

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

Quá trình xử lý chạy trong trình duyệt. Giá trị nhập, đơn vị nguồn/đích, giá trị được lưu đệm theo từng đơn vị, cỡ chữ gốc, cỡ chữ tham chiếu EM, viewport, tham chiếu phần trăm và lựa chọn breakpoint có thể được giữ lại trong phiên trình duyệt hiện tại hoặc bộ nhớ trình duyệt. Nếu bạn lưu không gian làm việc hoặc bật đồng bộ WebDAV, các giá trị đó có thể được lưu theo cài đặt đồng bộ của bạn. Kết quả chuyển đổi được tính lại từ giá trị, đơn vị và cài đặt ngữ cảnh hiện tại, chứ không được lưu dưới dạng kết quả riêng. Trang này không tải URL hoặc gửi giá trị lên máy chủ để chuyển đổi. Trên thiết bị dùng chung, hãy xóa các giá trị, cài đặt và dữ liệu trang web khi cần.

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.

Về chúng tôi

Về chúng tôi
Bảng giá

Pháp lý

Điều khoản
Chính sách quyền riêng tư
Chính sách Cookie

Tùy chọn

Quản lý Cookie

Toàn bộ quá trình xử lý của công cụ diễn ra cục bộ trong trình duyệt của bạn.