Duyệt mọi đơn vị CSS — tuyệt đối (px, cm, pt), tương đối theo font (em, rem, ch), viewport (vw, dvh), container-query, grid (fr), góc, thời gian và độ phân giải — trong một tham chiếu có thể tìm kiếm và lọc theo loại, kèm mô tả, ghi chú "khi nào dùng" và token sẵn sàng sao chép. Trong trình duyệt, miễn phí.

Mọi đơn vị CSS, được giải thích. Tất cả chạy trong trình duyệt của bạn từ một tham chiếu tích hợp — không có gì gửi lên máy chủ.

Không có đơn vị nào khớp tìm kiếm của bạn.
Thử một đơn vị hoặc danh mục khác — ví dụ rem, dvh, fr hoặc góc.

Giới thiệu về Tham chiếu đơn vị CSS

CSS Units Reference ghi lại mọi đơn vị mà ngôn ngữ này cung cấp — tổng cộng 45 đơn vị — được tổ chức theo loại: đơn vị tuyệt đối như px, cm và pt; đơn vị tương đối theo font như em, rem, ch và lh; đơn vị viewport từ vw và vh đến các đơn vị mới hơn svh, lvh và dvh; đơn vị container-query như cqw và cqi; đơn vị fr của grid; cùng đơn vị góc, thời gian, độ phân giải và phần trăm.

Mỗi thẻ cung cấp nhiều hơn một định nghĩa: token đơn vị ở dạng monospace có thể sao chép, tên đầy đủ, danh mục, mô tả dễ hiểu về cách nó được tính toán, và ghi chú "khi nào nên dùng" thực tế cho biết đơn vị đó phát huy tác dụng ở đâu — và khi nào một đơn vị khác phù hợp hơn.

Tìm kiếm khớp với token, tên và ý nghĩa, nên rem, viewport width và root đều tìm ra đơn vị của chúng, và các nhãn loại lọc lưới xuống một họ đơn vị. Mọi thứ chạy trong trình duyệt của bạn từ một tài liệu tham khảo tích hợp sẵn, không có gì gửi đến máy chủ.

Cách sử dụng Tham chiếu đơn vị CSS

  1. Tìm một đơn vị theo token, tên hoặc ý nghĩa — ví dụ rem, viewport width hoặc angle.
  2. Dùng các nhãn loại để lọc lưới xuống các đơn vị absolute, font-relative, viewport, container, grid, angle, time, resolution hoặc percentage.
  3. Đọc mô tả của mỗi đơn vị và ghi chú "khi nào nên dùng" để chọn đơn vị phù hợp.
  4. Nhấp nút sao chép để lấy token đơn vị cho stylesheet của bạn.

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

Dùng rem cho cỡ chữ và bất cứ thứ gì nên co giãn theo cỡ chữ ưa thích của người dùng — rem theo dõi cỡ chữ gốc, nên các thiết lập trợ năng của trình duyệt vẫn hoạt động. Dùng px cho những thứ cần giữ cố định về mặt thị giác, như đường viền mảnh.

em tương đối với cỡ chữ của chính phần tử hiện tại, nên các phần tử lồng nhau sẽ cộng dồn giá trị; rem luôn tương đối với phần tử gốc, cho kết quả có thể dự đoán được. Đó là lý do rem đã trở thành lựa chọn mặc định cho khoảng cách và thang chữ.

Trình duyệt di động hiện và ẩn thanh công cụ, làm thay đổi chiều cao hiển thị, trong khi vh giữ cố định theo kích thước bố cục lớn hơn. Đơn vị động dvh theo dõi chiều cao hiển thị thực tế khi thanh công cụ di chuyển, còn svh/lvh cố định ở trạng thái nhỏ nhất và lớn nhất.

fr phân phối không gian trống của container grid theo phân số: grid-template-columns: 2fr 1fr cho cột đầu tiên gấp đôi chiều rộng còn lại của cột thứ hai, sau khi trừ đi các track cố định và khoảng cách gap. Nó chỉ tồn tại bên trong định nghĩa track của grid.

Chúng định kích thước phần tử tương đối với container truy vấn gần nhất thay vì viewport: cqw là 1% chiều rộng của container, cqi là 1% kích thước theo chiều dòng chữ của nó. Chúng cho phép một thành phần co giãn theo hộp chứa nó, độc lập với kích thước màn hình.

Có. Toàn bộ 45 đơn vị được ghi lại miễn phí trong một trang chạy hoàn toàn trong trình duyệt của bạn — không cần đăng ký, không có yêu cầu nào gửi đến máy chủ.

Cần trợ giúp?
Gặp sự cố với công cụ này? Hãy cho đội ngũ của chúng tôi biết.
Báo cáo sự cố

Thêm công cụ miễn phí này vào trang web của riêng bạn — sao chép và dán mã bên dưới.