Chuyển đổi đơn vị CSS (px, rem, em, vw, pt…)

Chuyển đổi đơn vị CSS là gì?

Chuyển một độ dài CSS giữa các đơn vị tuyệt đối (px, pt, pc, in, cm, mm, Q) và tương đối (rem, em, %, vw, vh, vmin, vmax). Đặt cỡ chữ gốc, cỡ chữ phần tử cha và kích thước khung nhìn để đơn vị tương đối được tính đúng với bối cảnh thực tế của bạn; mọi đơn vị được hiển thị cùng lúc.

Cách sử dụng Chuyển đổi đơn vị CSS

1. Nhập Giá trị và chọn đơn vị Từ và Sang.
2. Điều chỉnh Cỡ chữ gốc (px, cho rem), Cỡ chữ phần tử cha (px, cho em và %) cùng chiều rộng và chiều cao khung nhìn.
3. Sao chép kết quả chính hoặc nhấn vào thẻ đơn vị bất kỳ để sao chép giá trị đó.

Ví dụ

24px (root 16px)

1.5rem · 18pt · 1.25vw (1920px viewport)

Khi nào nên dùng Chuyển đổi đơn vị CSS

Dùng khi chuyển thông số thiết kế theo px sang CSS dùng rem, hoặc kiểm tra một giá trị vw tương ứng bao nhiêu trên một màn hình cụ thể. % chỉ tương đương em với font-size; với width hoặc padding, % tính theo khối chứa, điều mà công cụ này không thể biết.

Chuyển đổi đơn vị CSS hoạt động như thế nào

Mọi phép đổi đều đi qua điểm ảnh CSS. Đơn vị tuyệt đối dùng tỷ lệ cố định của CSS: 1in = 96px = 2.54cm = 25.4mm = 72pt = 6pc, 1Q = 0.25mm. rem nhân với cỡ chữ gốc, em nhân với cỡ chữ phần tử cha, % là phần trăm của cỡ chữ phần tử cha (theo cách hiểu của font-size), vw/vh là 1% chiều rộng/chiều cao khung nhìn và vmin/vmax dùng cạnh nhỏ hơn/lớn hơn. Kết quả được làm tròn đến 4 chữ số thập phân.

Các Trường Hợp Sử Dụng Phổ Biến

• ✓ Đổi kích thước px của design system sang rem
• ✓ Kiểm tra 5vw lớn bao nhiêu trên laptop rộng 1440px
• ✓ Đổi kích thước in ấn theo pt hoặc mm sang px CSS
• ✓ Tính giá trị em cho component có cỡ chữ phần tử cha 20px

Câu Hỏi Thường Gặp

Khám phá thêm danh mục