Chuyển đến nội dung
Chuyển đổi giờ khai cuộc World Cup đã ra mắtXem giờ khai cuộc theo múi giờ của bạn và thêm nhắc lịch.
Logo CrateX.app

CrateX.app

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

Chuyển đổi các đơn vị CSS một-một giữa px, rem, em, %, vw, vh, vmin, vmax, pt, cm, mm, q, ex và ch cục bộ với cỡ chữ gốc, cỡ chữ cha, viewport, DPI và cài đặt tham chiếu phần trăm.

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à chọn đơn vị nguồn
2
Chọn đơn vị đích hoặc dùng Hoán đổi để đảo chiều
3
Đặt ngữ cảnh rem/em/%/vw/vh khi cần
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.
Nền EM (cỡ chữ cha): quyết định em và % khi tham chiếu là cỡ chữ. Hữu ích cho scale theo component: đổi cỡ chữ cha để 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 (số chấm trên inch): dành cho đơn vị vật lý pt/pc/in/cm/mm/q ↔ px. Ước tính CSS mặc định là 96 DPI; giá trị tùy chỉnh là ước tính in/thiết bị chứ không phải tính toán bố cục cuối cùng của trình duyệt.
Lời khuyên: 1) 16px và 96 DPI là những cơ sở phổ biến; 2) xác minh tỷ lệ phần trăm bố cục bằng cách chuyển đổi điểm dừng; 3) các điều khiển này giúp ước tính thời gian thiết kế và không thay thế 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 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ữ cha ở đây; kết quả không phải là kiểm tra số liệu phông chữ và khác nhau tùy theo phông chữ/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
Đơn vị vật lý ↔ px sử dụng ước tính DPI đã định cấu hình; công việc in/HiDPI vẫn cần kiểm tra trên thiết bị hoặc bản in thử

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ị From/To, giá trị đã lưu theo từng đơn vị, cỡ chữ gốc, cỡ chữ cha, viewport, DPI, tham chiếu phần trăm và lựa chọn breakpoint có thể ở 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ị này 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, không được lưu như kết quả riêng. Trang này không tải URL và không gửi giá trị để chuyển đổi phía máy chủ. Trên thiết bị dùng chung, hãy xóa giá trị, cài đặt và dữ liệu trang 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.

Tài nguyên

Hướng dẫn

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.