Trình chuyển đổi đơn vị CSS

Trình chuyển đổi đơn vị CSS là gì?

Trình chuyển đổi đơn vị CSS là một công cụ miễn phí chạy trong trình duyệt, dịch một độ dài CSS duy nhất thành bảy đơn vị thông dụng: px, rem, em, pt, %, vw và vh. Các nhà phát triển front-end và nhà thiết kế web dùng nó để chuyển một bố cục giữa pixel tuyệt đối và đơn vị đáp ứng, để kiểm tra một rem tương ứng với bao nhiêu pixel với cỡ chữ gốc tùy chỉnh, hoặc để chuyển một giá trị pt kiểu in ấn thành pixel màn hình. Vì rem phụ thuộc vào cỡ chữ gốc, em và % phụ thuộc vào cỡ chữ của phần tử cha, còn vw/vh phụ thuộc vào khung nhìn, nên trình chuyển đổi đưa cả bốn yếu tố này ra dưới dạng các thiết lập có thể điều chỉnh. Nhập một giá trị, chọn đơn vị nguồn của nó, và mọi ô kết quả cập nhật cùng lúc. Một đoạn mã CSS sẵn sàng để dán liệt kê cả bảy giá trị tương đương dưới dạng các khai báo font-size.

Cách sử dụng Trình chuyển đổi đơn vị CSS

1. Mở Cài đặt và đặt cỡ chữ gốc (font-size của html mà rem dựa vào), cỡ chữ của phần tử cha (dùng cho em và %), cùng chiều rộng và chiều cao của khung nhìn (dùng cho vw và vh).
2. Nhập con số bạn muốn chuyển đổi vào ô giá trị.
3. Chọn đơn vị nguồn từ danh sách thả xuống Từ: px, rem, em, pt, %, vw hoặc vh.
4. Đọc từng giá trị tương đương trong các ô kết quả có nhãn, chỉ đọc; tất cả đều tự động tính lại khi bạn thay đổi giá trị, đơn vị hoặc bất kỳ thiết lập nào.
5. Sao chép đoạn mã CSS được tạo để dán cả bảy giá trị tương đương font-size thẳng vào biểu định kiểu của bạn.

Ví dụ

Gốc 16px, giá trị 16, Từ px

rem = 1

Gốc 10px, giá trị 2, Từ rem

px = 20

giá trị 16, Từ px

pt = 12

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

Nó chuyển đổi giữa những đơn vị nào?

Bảy đơn vị độ dài CSS: px, rem, em, pt, %, vw và vh. Bất kỳ đơn vị nào cũng có thể là nguồn, và cả bảy giá trị tương đương được hiển thị cùng lúc.

Tại sao tôi phải đặt kích thước gốc, phần tử cha và khung nhìn?

Các đơn vị này là tương đối. rem là bội số của cỡ chữ gốc (html), em và % tương đối so với cỡ chữ của phần tử cha, còn vw/vh là phần trăm của chiều rộng và chiều cao khung nhìn. Việc đặt chúng trong Cài đặt cho trình chuyển đổi biết mỗi đơn vị tương đối quy ra bằng bao nhiêu.

pt được xử lý như thế nào?

CSS định nghĩa 96px = 1in = 72pt, nên 1pt bằng 4/3 px và 1px bằng 0,75pt. Trình chuyển đổi dùng tỷ lệ cố định này, độc lập với cỡ chữ hay khung nhìn.

Điều gì xảy ra nếu một giá trị hoặc thiết lập không hợp lệ?

Nếu giá trị không phải là một số hữu hạn, hoặc nếu bất kỳ kích thước gốc, phần tử cha hay khung nhìn nào bị thiếu, bằng không hoặc âm, các ô kết quả sẽ hiển thị dấu gạch ngang (—) cho đến khi bạn nhập các số hợp lệ.

Có gì được gửi đến máy chủ không?

Không. Mọi chuyển đổi đều chạy hoàn toàn ở phía máy khách trong trình duyệt của bạn, không tải lên và không gọi máy chủ, nên các giá trị bạn nhập không bao giờ rời khỏi thiết bị của bạn.