Bộ chuyển đổi đơn vị CSS là gì?
CSS hỗ trợ nhiều đơn vị khác nhau để định kích thước — đơn vị tuyệt đối như px và pt, và đơn vị tương đối như rem, em, vw, vh và %. Các đơn vị tương đối rất cần thiết cho thiết kế đáp ứng, dễ tiếp cận (rem đặc biệt tôn trọng tùy chọn kích thước phông chữ của trình duyệt người dùng), nhưng việc chuyển đổi giữa chúng bằng nhẩm thực sự khó khăn, vì kết quả phụ thuộc vào ngữ cảnh: kích thước phông chữ gốc, kích thước phông chữ của phần tử hiện tại, hoặc kích thước khung nhìn.
Bộ chuyển đổi này thực hiện phép tính đó thay bạn: đặt kích thước phông chữ cơ sở, kích thước khung nhìn, và giá trị bạn đang chuyển đổi, rồi xem giá trị tương đương ở mọi đơn vị khác ngay lập tức — hữu ích để chuyển các số đo pixel từ bản thiết kế mockup sang giá trị rem/vw đáp ứng, hoặc kiểm tra lại xem một quy tắc CSS hiện có thực sự hiển thị như thế nào trên màn hình.
Khi Nào Nên Sử Dụng Máy Tính Này
- Khi bạn cần đánh giá chi phí công cụ trước khi bắt đầu dự án
- Khi so sánh kết quả với các công cụ tương tự khác
- Khi tìm hiểu cách sử dụng công cụ trong các kịch bản khác nhau
- Khi chia sẻ kết quả với nhóm hoặc khách hàng
- Khi xác minh độ chính xác của phép tính công cụ
- Khi tìm kiếm giải pháp nhanh chóng và dễ dàng cho một vấn đề cụ thể
Các bước:
- Nhập giá trị bạn muốn chuyển đổi và chọn đơn vị ban đầu của nó.
- Đặt kích thước phông chữ cơ sở của bạn (mặc định là chuẩn trình duyệt 16px).
- Với chuyển đổi vw/vh, nhập chiều rộng và chiều cao khung nhìn mục tiêu.
- Xem giá trị tương đương ở mọi đơn vị khác ngay lập tức.
Công Thức
1rem = 1em = kích thước phông chữ cơ sở (mặc định 16px)
1pt = 96/72 px ≈ 1,333px
1vw = chiều rộng khung nhìn / 100
1vh = chiều cao khung nhìn / 100
1% = giá trị tham chiếu / 100
Trường Hợp Sử Dụng
- Chuyển đổi bản thiết kế Figma/Sketch dựa trên pixel của nhà thiết kế sang giá trị rem cho CSS dễ tiếp cận
- Kiểm tra kích thước phông chữ đáp ứng dựa trên vw thực sự hiển thị như thế nào ở một chiều rộng màn hình cụ thể
- Chuyển đổi CSS cũ dựa trên pt cho in ấn hoặc email sang px hoặc rem theo chuẩn web
- Kiểm toán xem thang đo khoảng cách của hệ thống thiết kế có nhất quán trên các đơn vị hay không
- Nhanh chóng kiểm tra một giá trị CSS trong khi rà soát mã mà không cần mở công cụ dành cho nhà phát triển
Lợi Ích Chính
- Chuyển đổi giữa cả 7 đơn vị CSS thông dụng ở một nơi
- Dùng kích thước phông chữ cơ sở và khung nhìn thực tế của bạn, không phải một giả định cố định
- Kết quả tức thì khi bạn gõ — không cần mở công cụ dành cho nhà phát triển của trình duyệt
- Miễn phí, không cần đăng ký, chạy hoàn toàn trong trình duyệt của bạn
Mẹo Chuyên Nghiệp
- Ưu tiên rem hơn em cho kích thước phông chữ để tránh cộng dồn ngoài dự kiến trong các thành phần lồng nhau
- Dùng dvh/svh thay vì vh cho bố cục toàn màn hình trên di động nếu trình duyệt mục tiêu của bạn hỗ trợ
- Giữ kích thước phông chữ cơ sở nhất quán trong toàn bộ hệ thống thiết kế của bạn để việc chuyển đổi rem luôn có thể dự đoán được
- Khi chuyển đổi một thiết kế chính xác từng pixel, hãy chuyển khoảng cách sang rem nhưng giữ độ rộng viền và các chi tiết nhỏ khác ở px
Những Lỗi Thường Gặp Cần Tránh
- Cho rằng 1rem luôn bằng 16px, mà không kiểm tra xem kích thước phông chữ gốc có bị thay đổi hay không
- Dùng vh cho bố cục toàn màn hình trên di động mà không tính đến hành vi thanh địa chỉ của trình duyệt
- Lồng các kích thước phông chữ dựa trên em và bất ngờ khi chúng cộng dồn ngoài dự kiến
- Trộn lẫn px và rem một cách không nhất quán trong cùng một thành phần, phá vỡ khả năng co giãn tiếp cận
Các Thuật Ngữ Chính Được Giải Thích
- Kích thước phông chữ gốc (Root font size): kích thước phông chữ được đặt trên phần tử html, mà mọi đơn vị rem đều tương đối với nó
- Khung nhìn (Viewport): vùng hiển thị của một trang web trong cửa sổ trình duyệt
- Đơn vị tuyệt đối (Absolute unit): một đơn vị như px hoặc pt có kích thước thực cố định, không phụ thuộc vào ngữ cảnh nào
- Đơn vị tương đối (Relative unit): một đơn vị như rem, em, vw, hoặc % mà kích thước của nó phụ thuộc vào một giá trị khác
Khái niệm liên quan
- Bộ chuyển đổi màu: Chuyển đổi giữa các định dạng màu HEX, RGB và HSL
- Bộ chuyển đổi độ dài: Chuyển đổi giữa inch, xentimét, pixel và nhiều hơn nữa
- Bộ chuyển đổi đơn vị: Chuyển đổi giữa các đơn vị đo lường khác nhau
- Máy tính tỷ lệ khung hình: Tính toán và chuyển đổi tỷ lệ khung hình
- Bộ chuyển đổi dữ liệu: Chuyển đổi giữa byte, KB, MB, GB và TB
Ví Dụ
Với kích thước phông chữ cơ sở 16px, 1.5rem chuyển đổi thành 24px. Với chiều rộng khung nhìn 1440px, 5vw chuyển đổi thành 72px.
Giải thích kết quả của bạn
Công cụ này hiển thị kết quả chi tiết dựa trên dữ liệu bạn nhập. Hãy xem kỹ từng phần để hiểu cách diễn giải các con số và đưa ra quyết định dựa trên đó.
Nếu bạn có thắc mắc về cách công cụ hoạt động hoặc cách diễn giải một số kết quả cụ thể, hãy tham khảo phần Câu hỏi thường gặp bên dưới hoặc liên hệ bộ phận hỗ trợ.